How do I import a SVG icon so that it cannot be dragged off screen?

user_16422668 0
Viewed 81

So I've made my own SVG line icon in adobe illustrator, I want to import it into my code however when I use:

<img class="shape-1" src="assets/images/widgeticon.svg" alt="shape">

I am able to hover over the icon and drag it, I would like a method in which I am unable to drag the icon off the webpage (for example dragging it into a new tab) - I hope i'm making sense.

I have previously used this function:

<i class="lni-thought"></i>

However this was done using a LineIcons.css, how can I recreate this on my own terms so that the icon does not move if attempted to be dragged off the screen?

Strange question I know, look forward to your answers!

svg css html
3 Answers

Paul's answer would work, however you do loose some control over the SVG when including it as a background.

A better solution would to just disable dragging on the element, or disable pointer-events:

<div class="shape-1" title="shape" draggable='false'></div>

or,

<div class="shape-1" title="shape" style='pointer-events: none'></div>

Read up about pointer-events before using it. Disabling them will make the cursor 'pass through' elements, rendering them un-selectable at all. But it can be useful if you instead wrap the icon in a <a> tag.

https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

user_81068590

You could inline the SVG into your HTML.

Or something like the following should work. Use another element, then set the SVG image as the background.

<div class="shape-1" title="shape"></div>


.shape-1 {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(assets/images/widgeticon.svg") no-repeat;
}
user_12928480

Use pointer-events: none; css in img tag, and if any click event add on parent tag.

Or draggable='false' attribute

Example: in i tag you can add your click/hover any event if required.

<i>
  <img style="pointer-events: none;" src="https://www.svgrepo.com/show/19461/url-link.svg" alt="shape">
</i>

<img draggable='false' src="https://www.svgrepo.com/show/19461/url-link.svg" alt="shape">

user_29192480
Related