Do I use <img>, <object>, or <embed> for SVG files?

Question

Should I use <img>, <object>, or <embed> for loading SVG files into a page in a way similar to loading a jpg, gif or png?

What is the code for each to ensure it works as well as possible? (I'm seeing references to including the mimetype or pointing to fallback SVG renderers in my research and not seeing a good state of the art reference).

Assume I am checking for SVG support with Modernizr and falling back (probably doing a replacement with a plain <img> tag)for non SVG-capable browsers.

Trichinosis

just take a look on github.com/jonathantneal/svg4everybody – Smarm

Theoretically, you could also have a <svg> from which you want to reference other SVGs. This can be achieved, e.g. using <image>. – Ecru

I just wrote a blog post on this very issue: claude-e-e.medium.com/… – Affirmative

You can load an external SVG file yourself and inject it into the DOM Take inspiration from the Native JavaScript <load-file> Web Component I blogged about. – Centuple

Answer 1

I can recommend the SVG Primer (published by the W3C), which covers this topic: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML

If you use <object> then you get raster fallback for free*:

<object data="your.svg" type="image/svg+xml">
  <img src="yourfallback.jpg" />
</object>

*) Well, not quite for free, because some browsers download both resources, see Larry's suggestion below for how to get around that.

2014 update:

• If you want a non-interactive svg, use <img> with script fallbacks to png version (for older IE and android < 3). One clean and simple way to do that:

  <img src="your.svg" onerror="this.src='your.png'">.

  This will behave much like a GIF image, and if your browser supports declarative animations (SMIL) then those will play.

• If you want an interactive svg, use either <iframe> or <object>.

• If you need to provide older browsers the ability to use an svg plugin, then use <embed>.

• For svg in css background-image and similar properties, modernizr is one choice for switching to fallback images, another is depending on multiple backgrounds to do it automatically:

  div {
      background-image: url(fallback.png);
      background-image: url(your.svg), none;
  }
  

  Note: the multiple backgrounds strategy doesn't work on Android 2.3 because it supports multiple backgrounds but not svg.

An additional good read is this blogpost on svg fallbacks.

Pushbike

What's the right way to set a size? Do I include height and width atributes, or do I use CSS? – Trichinosis

Using css is fine, or setting the size on the embedding element (that is: either of iframe, embed, object, img) - what the latter does is it may avoid flash-of-unstyled-content before the stylesheet that defines the size is loaded. Also make sure the svg has a viewBox attribute, and remove the width/height attributes from the svg root element. That will give you the best crossbrowser behavior in my experience. – African

This method will always download the raster file. This answer ensures that the fallback is only requested on legacy IE browsers. – Mere

Note that the above does not work with the Adobe SVG Plug-in. But, you can get it all to work (modern browsers + ASV+MSIE) if you add <param name="src" value="your.svg" /> inside the <object> tag. I have spent a very long time trying to figure out how to do all that, and I think I've finally got it. – Cannula

@Christopher Schultz I attempted this fix and discovered it seems to make the fallback fail in regular IE8 not using the Adobe SVG plugin. – Untie

What about scaling the svg? – Acorn

do any of these methods me to alter the svg with css? or can I only do that with an inline svg? – Chanell

@GraphicO that's the start of a good question (please do post it). In general all svg can be styled with css (as long as the CSS is either inline or in a <style> element in the svg document). Anything involving external stylesheets depends on the context, and cross-document styling isn't possible unless there are provisions like "seamless iframe" or similar (see e.g #12236306). – African

This shouldn't be the correct answer anymore. Just use <img> tag as stated in my answer below. – Myeloid

@ChristianLandgren there are many scenarios where <img> isn't going to cut it, e.g interactive content, as noted in the 2014 update. – African

None of the solutions in this answer worked for me in the latest version of Chrome or Safari. (It may be to do with the fact I didn't have an SVG icon for tile on my page, but there was no correlation between tiles showing correctly that had svg and didn't). The answer I write below worked for me. – Greenheart

@Jonathan.: that sounds very strange, please verify that your server is configured correctly, and if it still fails please file a bug at crbug.com. – African

@ErikDahlström, it seems to be an error with my server not returning 404. Instead when the sag isn't found it is redirected to the homepage (except for one svg which correctly returns 404). Nevertheless it seems like Chrome should timeout at some point? – Greenheart

Good list, but iframe looks bad on Android 2.2, see developersdev.blogspot.ru/2014/10/… – Prenotion

@Artru That's not surprising considering that the Android 2.2 browser doesn't support svg. – African

@ErikDahlström This is not hte problem of not supporting SVG. Android 2.2 shows SVG style text only with iframe, and this is the problem, object and img does not produce such behaviour – Prenotion

Just to point out that the example of specifying a fallback like this: div { background-image: url(fallback.png); background-image: url(your.svg), none; } won't work in old Android (2.3) as it supports multiple backgrounds but not SVG. – Delacroix

@niico Let's not support IE 6 – Inflexible

You mean IE 8. It's so easy to have a fallback (one line of HTML/JS) I think it's just about worth supporting IE 8 for now. – Calotte

I think the faster people stop supporting ancient browsers the faster we will have a society that keeps their browsers up to date, which even goes automatically with a browser from 2012. The only excuse would be having no free access to a modern browser, but Firefox e.g. supports Windows XP still (probably to version 52). There is ALWAYS a modern and free alternative. – Campball

@Neon, yes and no. On a corp controlled domain, many workstations are stuck to IE at a particular version, with no option to install 3rd party browsers. Not a nice situation but that is why IE <10 still represent a significant portion of agents out there. – Affined

It's seems important to note that (at least on Chrome) using the <object> tag doesn't cache the SVG file, while using the <img> tag does cache the file. – Courageous

As always, it depends on your particular use-case. From what I've seen in recent years, inline svg (e.g generated by JSX in react or similar) is getting more and more common. – African

<picture> would be the best in modern browser (if fallback is the goal). – Sombrero

Beware, if somehow "your.png" can't be loaded you started an infinite network requests loop. Better to remove the error handler from itself. – Gymnastics

Thanks for the blogpost! helped me on more than one bullet – Flaxseed

How is <object> "interactive"? It can't be selected using CSS selectors. Is it introduced as interactive because it can be accessed using JavaScript? – Acrimony

so then what's the difference between embed, object, and iframe? – Toast

Answer 2

From IE9 and above you can use SVG in a ordinary IMG tag..

https://caniuse.com/svg-img

<img src="/static/image.svg">

Myeloid

This does not work if the SVG requires other resources to be loaded. (Fonts, images, ...) – Octarchy

For a logo or icon I would still recommend using an IMG tag for semantical reasons and make sure the SVG is just a vector illustration. – Myeloid

Now accepted everywhere. @artlung, you may want to change your answer to this one. – Emogene

Anyone using the <img/> tag may want to know about appending SVG Fragement identifiers, e.g. "<img src="myimage.svg#svgView(preserveAspectRatio(none))" />", which lets you control the aspect ratio, viewBox, etc the same as with inline SVG definitions. Further reading on scaling - css-tricks.com/scale-svg – Shardashare

Thanks, but how do you add an existing svg image to the <svg> tag? – Bothnia

Using img tag has this caveat that the svg could not be manipulated from outside. – Acrimony

Answer 3

<object> and <embed> have an interesting property: they make it possible to obtain a reference to SVG document from outer document (taking same-origin policy into account). The reference can then be used to animate the SVG, change its stylesheets, etc.

Given

<object id="svg1" data="/static/image.svg" type="image/svg+xml"></object>

You can then do things like

document.getElementById("svg1").addEventListener("load", function() {
    var doc = this.getSVGDocument();
    var rect = doc.querySelector("rect"); // suppose our image contains a <rect>
    rect.setAttribute("fill", "green");
});

Esteresterase

I don't think you will get a "load" event from an <object> element. Not supported. – Striate

@SteveO'Connor I don't know, maybe it's not well documented, but it certainly works in Firefox, IE11 and Chrome. At least with external SVG files: I couldn't make it work with data URIs. – Esteresterase

Works great! Interestingly, adding the 'id' field seems to be required when you have two SVG files, otherwise only 1 will show up in my opera browser? – Culpable

You get the best of both inline and referenced with this method! – Signalment

It's good to be aware that hyperlinks inside an SVG will not work unless the SVG is inline. – Barrier

But it still cannot be accessed using CSS selectors. – Acrimony

Answer 4

Use srcset

Most current browsers today support the srcset attribute, which allows specifying different images to different users. For example, you can use it for 1x and 2x pixel density, and the browser will select the correct file.

In this case, if you specify an SVG in the srcset and the browser doesn't support it, it'll fallback on the src.

<img src="logo.png" srcset="logo.svg" alt="My logo">

This method has several benefits over other solutions:

1. It's not relying on any weird hacks or scripts
2. It's simple
3. You can still include alt text
4. Browsers that support srcset should know how to handle it so that it only downloads the file it needs.

Megrim

Why bother given that there's a > 99% chance that any browser will support SVG these days? – Overhaul

A part from ensuring EVERYONE can see the page accurately, Google will love you more! – Whelan

Looks better than it is, given that at current point in time you're pushing fallback image to ~10% of users. – Stansbury

@VolkerE. 10%? caniuse shows lack of SVG support around 2%. I still use srcset like in the answer though to support the 2%. In the future, I hope browsers are able to take information like srcset and pick the appropriate image based on factors like performance and size, not just device size or file format support. – Megrim

@Megrim When I left the comment above, I also added a caniuse link to the answer. 89.6% global srcset support accordingly as of today. – Stansbury

Only issue with this solution is when browsers support SVG but not srcset. Such as IE11, which defaults back to PNG even though it supports SVG – Amritsar

Answer 5

I would personally use an <svg> tag because if you do you have full control over it. If you do use it in <img> you don't get to control the innards of the SVG with CSS etc.

another thing is browser support.

Just open your svg file and paste it straight into the template.

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3400 2700" preserveAspectRatio="xMidYMid meet" (click)="goHome();">
  <g id="layer101">
    <path d="M1410 2283 c-162 -225 -328 -455 -370 -513 -422 -579 -473 -654 -486 -715 -7 -33 -50 -247 -94 -475 -44 -228 -88 -448 -96 -488 -9 -40 -14 -75 -11 -78 2 -3 87 85 188 196 165 180 189 202 231 215 25 7 129 34 230 60 100 26 184 48 185 49 4 4 43 197 43 212 0 10 -7 13 -22 9 -13 -3 -106 -25 -208 -49 -102 -25 -201 -47 -221 -51 l-37 -7 8 42 c4 23 12 45 16 49 5 4 114 32 243 62 129 30 240 59 246 66 10 10 30 132 22 139 -1 2 -110 -24 -241 -57 -131 -33 -240 -58 -242 -56 -6 6 13 98 22 107 5 4 135 40 289 80 239 61 284 75 307 98 14 15 83 90 153 167 70 77 132 140 139 140 7 0 70 -63 141 -140 70 -77 137 -150 150 -163 17 -19 81 -39 310 -97 159 -41 292 -78 296 -82 8 -9 29 -106 24 -111 -1 -2 -112 24 -245 58 -134 33 -245 58 -248 56 -6 -7 16 -128 25 -136 5 -4 112 -30 238 -59 127 -29 237 -54 246 -57 11 -3 20 -23 27 -57 6 -28 9 -53 8 -54 -1 -1 -38 7 -81 17 -274 66 -379 90 -395 90 -16 0 -16 -6 3 -102 11 -57 21 -104 22 -106 1 -1 96 -27 211 -57 115 -31 220 -60 234 -66 14 -6 104 -101 200 -211 95 -111 175 -197 177 -192 1 5 -40 249 -91 542 l-94 532 -145 203 c-220 309 -446 627 -732 1030 -143 201 -265 366 -271 367 -6 0 -143 -183 -304 -407z m10 -819 l-91 -161 -209 -52 c-115 -29 -214 -51 -219 -49 -6 1 32 55 84 118 l95 115 213 101 c116 55 213 98 215 94 1 -3 -38 -78 -88 -166z m691 77 l214 -99 102 -123 c56 -68 100 -125 99 -127 -4 -3 -435 106 -447 114 -4 2 -37 59 -74 126 -38 68 -79 142 -93 166 -13 23 -22 42 -20 42 2 0 101 -44 219 -99z"/>
    <path d="M1126 2474 c-198 -79 -361 -146 -363 -147 -2 -3 -70 -410 -133 -805 -12 -73 -20 -137 -18 -143 2 -6 26 23 54 63 27 40 224 320 437 622 213 302 386 550 385 551 -2 2 -165 -62 -362 -141z"/>
    <path d="M1982 2549 c25 -35 159 -230 298 -434 139 -203 283 -413 319 -465 37 -52 93 -134 125 -182 59 -87 83 -109 73 -65 -5 20 -50 263 -138 747 -17 91 -36 170 -42 176 -9 8 -571 246 -661 280 -14 6 -7 -10 26 -57z"/>
    <path d="M1679 1291 c-8 -11 -71 -80 -141 -153 l-127 -134 -95 -439 c-52 -242 -92 -442 -90 -445 6 -5 38 28 218 223 l99 107 154 0 c85 0 163 -4 173 -10 10 -5 78 -79 151 -162 73 -84 136 -157 140 -162 18 -21 18 4 -2 85 -11 46 -58 248 -105 448 l-84 364 -87 96 c-108 121 -183 201 -187 201 -2 0 -10 -9 -17 -19z m96 -488 c33 -102 59 -189 57 -192 -2 -6 -244 -2 -251 4 -5 6 120 375 127 375 4 0 34 -84 67 -187z"/>
    </g>
  </svg>

then in your css you can simply eg:

svg {
  fill: red;
}

Some resource: SVG tips

Stringfellow

not applicable when you must work with external (svg) files, which this question is about – Longwinded

Answer 6

If you need your SVGs to be fully styleable with CSS they have to be inline in the DOM. This can be achieved through SVG injection, which uses Javascript to replace a HTML element (usually an <img> element) with the contents of an SVG file after the page has loaded.

Here is a minimal example using SVGInject:

<html>
<head>
  <script src="svg-inject.min.js"></script>
</head>
<body>
  <img src="image.svg" onload="SVGInject(this)" />
</body>
</html>

After the image is loaded the onload="SVGInject(this) will trigger the injection and the <img> element will be replaced by the contents of the file provided in the src attribute. This works with all browsers that support SVG.

Disclaimer: I am the co-author of SVGInject

Magnanimity

I still don't get the advantage of using svg injection. Can you elaborate? – Sanderson

You can have SVGs in separate files, but still will be able to access them with CSS and/or Javascript. In some cases you can use webpack so your SVGs will be inline in your files, but if you access SVGs dynamically, SVG injection is basically the only way to achieve this. – Magnanimity

Unfortunately SVG_INJECT supports angular 13 or less only so I had to move to github.com/czeckd/angular-svg-icon – Johny

Answer 7

The best option is to use SVG Images on different devices :)

<img src="your-svg-image.svg" alt="Your Logo Alt" onerror="this.src='your-alternative-image.png'">

Thrower

interesting. but are you assured the onerror fires if svg doesn't render? what browsers have you tested? – Trichinosis

Yes, i test it on a mobile Android OS, default browser :) – Spongin

Answer 8

If you use <img> tags, then webkit based browsers won't display embedded bitmapped images.

For any kind of advanced SVG use, including the SVG inline offers by far the most flexibility.

Internet Explorer and Edge will resize the SVG correctly, but you must specify both the height and width.

You can add onclick, onmouseover, etc. inside the svg, to any shape in the SVG: onmouseover="top.myfunction(evt);"

You can also use web fonts in the SVG by including them in your regular style sheet.

Note: if you are exporting SVG's from Illustrator, the web font names will be wrong. You can correct this in your CSS and avoid messing around in the SVG. For example, Illustrator gives the wrong name to Arial, and you can fix it like this:

@font-face {    
    font-family: 'ArialMT';    
    src:    
        local('Arial'),    
        local('Arial MT'),    
        local('Arial Regular');    
    font-weight: normal;    
    font-style: normal;    
}

All this works on any browser released since 2013.

For an example, see ozake.com. The whole site is made of SVG's except for the contact form.

Warning: Web fonts are imprecisely resized in Safari — and if you have lots of transitions from plain text to bold or italic, there may be a small amount of extra or missing space at the transition points. See my answer at this question for more information.

Haggar

Thank you. Just spent 3 hours pulling my hair out trying to figure out why raster images were not showing up in my img tag... Do you know if this is officially documented anywhere? – Stumper

@Andrew Swift, you get really nice visual results on dev.ozake.com, but there are serious accessibility issues: search engines will probably have hard time indexing the site (I'm not sure they will pick up links hidden within SVG events); the site is not navigable by keyboard; seems that screen readers will choke on it... – Bain

Answer 9

Here's a summary of all the ways I could find for inserting SVGs into HTML templates together with their differences and their main pros and cons:

((( 1 )))

/* in CSS */
background-image: url(happy.svg);

This way neither allows JS interaction, nor the CSS itself could have more fine-grained control on the svg parts.

((( 2 )))

<img src="happy.svg" />

Just like ((( 1 ))), neither allows JS interaction, nor the CSS itself could have more fine-grained control on the svg parts.

Methods ((( 1 ))) and ((( 2 ))) are only fine if you want a static svg.

Note: When using the <img> tag, if you specify a SVG in the srcset attribute and the browser doesn't support it, it'll fallback to the src attribute automatically.

<img src="logo.png" srcset="logo.svg" alt="my logo">

((( 3 )))

<div>
 <!-- Paste the SVG code directly here. -->
 <svg>...</svg>
 <!-- AKA an inline svg -->
 <!-- would be the same if is created and appended using JavaScript. -->
</div>

This method does not have any of the caveats mentioned in ((( 1 ))) and ((( 2 ))), however, this method makes template code messy, and also SVGs are copy pasted, so they will not be in their own individual files.

((( 4 )))

<object data="happy.svg" width="300" height="300"></object>

OR:

<object data="your.svg" type="image/svg+xml">
  <img src="yourfallback.jpg" />
</object>

Using this method the SVG will not be accessible using external CSS, but will be accessible using JavaScript.

((( 5 )))

Use iconfu/svg-inject to keep the SVGs in their own individual files (to keep the template code much cleaner), now add the SVGs using <img> tags, and svg-inject will automatically turn them into inline SVGs, so they will be accessible to both CSS and JavaScript.

Note1: This method works also if imgs are added dynamically (using javascript).

Note2: SVGs added using this method are also cached by browsers just like images.

((( 6 )))

Using a single SVG sprite file, then use <use> tags to insert them. This way is quite flexible too, having the same effect as ((( 5 ))). This method (and a few more) are shown in action in this video.

((( 7 )))

(React-specific way) Turn them into React components (or write a component that loads them).

((( 8 )))

<embed src="happy.svg" />

According to MDN, most modern browsers have deprecated and removed support for browser plug-ins. This means that relying upon <embed> is generally not wise if you want your site to be operable on the average user's browser.

Acrimony

I think the (5) method is the best for clean and animated SVG – Gree

Answer 10

My two cents: as of 2019, 93% of browsers in use (and 100% of the last two version of every one of them) can handle SVG in <img> elements:

Source: Can I Use

So we could say that there's no reason to use <object> anymore.

However it's still has its pros:

• When inspecting (e.g. with Chrome Dev Tools) you are presented with the whole SVG markup in case you wanted to tamper a bit with it and see live changes.

• It provides a very robust fallback implementation in case your browser does not support SVGs (wait, but every one of them does!) which also works if the SVG isn't found. This was a key feature of XHTML2 spec, which is like betamax or HD-DVD

But there are also cons:

• there isn't an AMP counterpart to <object> (tho it's perfectly safe to use it with <amp-img> and use it inline too.
• you shouldn't mix serviceworker fetch handler with any kind of embed, so having an <object> tag might keep your PWA from being really offline capable.

Harmonia

Answer 11

Even though w3schools does not recommend the <embed> tag, it was the only thing that made my svg with mixed pattern and mask working in Chrome:

<embed src="logo.svg" style="width:100%; height:180px" type="image/svg+xml" />

Whereas Firefox was fine with

<svg style="width:100%">
    <use xlink:href="logo.svg#logo"></use>
</svg>

Chrome did not render the gradient:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="146" version="1.1">
    <title>digicraft punchcard logo</title>
    <defs>
        <linearGradient id="punchcard-gradient" x1="100%" y1="50%" x2="0%" y2="50%">
            <stop offset="0%" style="stop-color:rgb(128,128,128);stop-opacity:0" />
            <stop offset="100%" style="stop-color:rgb(69,69,69);stop-opacity:1" />
        </linearGradient>
        <pattern id="punchcard-pattern-v" x="0" y="0" width="21" height="21" patternUnits="userSpaceOnUse">
            <rect x="0" y="0" width="20" height="20" fill="skyblue" onClick="mClick(this)" />
        </pattern>
        <pattern id="punchcard-pattern-h" x="0" y="0" width="21" height="145" patternUnits="userSpaceOnUse">
            <rect x="0" y="0" width="21" height="20" fill="skyblue" />
            <rect x="0" y="20" width="20" height="84" fill="url(#punchcard-pattern-v)" />
            <rect x="0" y="105" width="20" height="20" fill="skyblue" />
            <rect x="0" y="126" width="21" height="20" fill="skyblue" />
        </pattern>
        <mask id="punchcard-mask" width="10" height="100%">
            <rect width="100%" height="146" fill="url(#punchcard-pattern-h)" />
        </mask>
    </defs>
        <rect x="0" y="0" width="100%" height="159" fill="url(#punchcard-gradient)" mask="url(#punchcard-mask)" />
</svg>

The same with <object> and <img> in both browsers.

Incarnadine

Answer 12

Found one solution with pure CSS and without double image downloading. It is not beautiful as I want, but it works.

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG demo</title>
    <style type="text/css">
     .nicolas_cage {
         background: url('nicolas_cage.jpg');
         width: 20px;
         height: 15px;
     }
     .fallback {
     }
    </style>
  </head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
    <style>
    <![CDATA[ 
        .fallback { background: none; background-image: none; display: none; }
    ]]>
    </style>
</svg>

<!-- inline svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
  <switch>
     <circle cx="20" cy="20" r="18" stroke="grey" stroke-width="2" fill="#99FF66" />
     <foreignObject>
         <div class="nicolas_cage fallback"></div>
     </foreignObject>
  </switch>
</svg>
<hr/>
<!-- external svg -->
    <object type="image/svg+xml" data="circle_orange.svg">
        <div class="nicolas_cage fallback"></div>
    </object>
</body>
</html>

The idea is to insert special SVG with fallback style.

More details and testing process you can find in my blog.

Prenotion

Answer 13

Based on personal experience, I suggest load svg file by src in image tag that if you have many svg icon or append dynamically on one page, it will slow down and bad performance

<img src="./file.svg"/> is better performance than 

<div><svg>.....</svg></div>

but if you want assign css style in hover you must use embed

Loera

Answer 14

Something intersting with <symbol>: you can reference an SVG inside the HTML document. The most important thing with this is that you can reuse the same SVG without reloading it, but also you can put long SVG at the bottom and keep your HTML easy to read.

Note that the viewBox attribute have to be on <symbol> tag.

<svg style="display: none;">
    <symbol id="icon-svg" viewBox="0 0 100 100">
        <!-- SVG content here -->
        <g>
            <circle cx="5" cy="5" r="4" stroke="red" />
            <circle cx="10" cy="5" r="4" stroke="green" />
            <circle cx="20" cy="5" r="4" stroke="blue" />
        </g>
    </symbol>
</svg>

<!-- Elsewhere in your HTML where you want to use the SVG -->
<svg><use href="#icon-svg"></use></svg>

Cautious

Answer 15

In most circumstances, I recommend using the <object> tag to display SVG images. It feels a little unnatural, but it's the most reliable method if you want to provide dynamic effects.

For images without interaction, the <img> tag or a CSS background can be used.

Inline SVGs or iframes are possible options for some projects, but it's best to avoid <embed>

But if you want to play with SVG stuff like

• Changing colors
• Resize path
• rotate svg

Go with the embedded one

<svg>
    <g> 
        <path> </path>
    </g>
</svg>

Cordero

Answer 16

This jQuery function captures all errors in svg images and replaces the file extension with an alternate extension

Please open the console to see the error loading image svg

(function($){
  $('img').on('error', function(){
    var image = $(this).attr('src');
    if ( /(\.svg)$/i.test( image )) {
      $(this).attr('src', image.replace('.svg', '.png'));
    }
  })  
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="https://jsfiddle.net/img/logo.svg">

Foscalina

Answer 17

You can insert a SVG indirectly using <img> HTML tag and this is possible on StackOverflow following what is described below:

I have following SVG file on my PC

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="350" viewBox="0 0 350 350">

  <title>SVG 3 Circles Intersection </title>

    <circle cx="110" cy="110" r="100"
            stroke="red"
            stroke-width="3"
            fill="none"
            />
    <text x="110" y="110" 
          text-anchor="middle"
          stroke="red"
          stroke-width="1px"
          > Label
    </text>
    <circle cx="240" cy="110" r="100" 
            stroke="blue" 
            stroke-width="3"
            fill="none"
            />
    <text x="240" y="110" 
          text-anchor="middle" 
          stroke="blue" 
          stroke-width="1px"
          > Ticket
    </text>
    <circle cx="170" cy="240" r="100" 
            stroke="green" 
            stroke-width="3" 
            fill="none"
            />
    <text x="170" y="240" 
          text-anchor="middle" 
          stroke="green" 
          stroke-width="1px"
          > Vecto
    </text>
</svg>

I have uploaded this image to https://svgur.com

After upload was terminated, I have obtained following URL:

https://svgshare.com/i/kyc.svg

I have then MANUALLY (without using IMAGE icon) added following html tag

<img src='https://svgshare.com/i/kyc.svg' title='Intersection of 3 Circles'/>

and the result is just below

Using data:image

For user with some doubt, it is possible to see what I have done in editing following answer on StackOverflow inserting SVG image

REMARK-1: the SVG file must contains <?xml?> element. At begin, I have simply created a SVG file that begins directly with <svg> tag and nothing worked !

REMARK-2: at begin, I have tried to insert an image using IMAGE icon of Edit Toolbar. I paste URL of my SVG file but StackOverflow don't accept this method. The <img> tag must be added manually.

I hope that this answer can help other users.

Soldierly

Answer 18

It's easier to just use the <svg> tag because your code will run faster and you are directly using your svg. To get only the svg tag copy the svg file without xml tag. The result will be something like this:

<svg fill="#000000" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 16 16" width="64px" height="64px"><path d="M 4.5 2 C 3.675781 2 3 2.675781 3 3.5 L 3 14.484375 L 8 10.820313 L 13 14.484375 L 13 3.5 C 13 2.675781 12.324219 2 11.5 2 Z M 4.5 3 L 11.5 3 C 11.78125 3 12 3.21875 12 3.5 L 12 12.515625 L 8 9.578125 L 4 12.515625 L 4 3.5 C 4 3.21875 4.21875 3 4.5 3 Z"/></svg>

Mathis

Answer 19

An easy alternative that works for me is to insert the svg code into a div. This simple example uses javascript to manipulate the div innerHTML.

svg = '<svg height=150>'; 
svg+= '<rect height=100% fill=green /><circle cx=150 cy=75 r=60 fill=yellow />';
svg+= '<text x=150 y=95 font-size=60 text-anchor=middle fill=red>IIIIIII</text></svg>';
document.all.d1.innerHTML=svg;

<div id='d1' style="float:right;"></div><hr>

Schramke

Answer 20

I recommend using the combination of

<svg viewBox="" width="" height="">
<path fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
</svg>

Telega

could you elaborate on why you would use these settings and why is it different from any other answers? – Pneumatics