Do I use img object or embed for SVG files

Question

Should I use  lt img gt    lt object gt   or  lt embed gt  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  lt img gt  tag for non SVG-capable browsers

User · Answer

lt object gt  and  lt embed gt  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   lt object id  svg1  data   static image svg  type  image svg xml  gt  lt  object gt    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  lt rect gt      rect setAttribute  fill    green

User · Answer

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  lt img gt  element  with the contents of an SVG file after the page has loaded   Here is a minimal example using SVGInject    lt html gt   lt head gt     lt script src  svg-inject min js  gt  lt  script gt   lt  head gt   lt body gt     lt img src  image svg  onload  SVGInject this     gt   lt  body gt   lt  html gt    After the image is loaded the onload  SVGInject this  will trigger the injection and the  lt img gt  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

User · Answer

If you use  lt img gt  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

User · Answer

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   x000D   x000D  svg     lt svg height 150 gt     svg     lt rect height 100  fill green   gt  lt circle cx 150 cy 75 r 60 fill yellow   gt    svg     lt text x 150 y 95 font-size 60 text-anchor middle fill red gt IIIIIII lt  text gt  lt  svg gt    document all d1 innerHTML svg  x000D   lt div id  d1  style  float right   gt  lt  div gt  lt hr gt  x000D   x000D   x000D

User · Answer

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    lt img src  logo png  srcset  logo svg  alt  My logo  gt    This method has several benefits over other solutions    It s not relying on any weird hacks or scripts It s simple You can still include alt text Browsers that support srcset should know how to handle it so that it only downloads the file it needs

User · Answer

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  lt object gt  then you get raster fallback for free     lt object data  your svg  type  image svg xml  gt     lt img src  yourfallback jpg    gt   lt  object gt       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  lt img gt  with script fallbacks to png version  for older IE and android  lt  3   One clean and simple way to do that    lt img src  your svg  onerror  this src  your png   gt     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  lt iframe gt  or  lt object gt    If you need to provide older browsers the ability to use an svg plugin  then use  lt embed gt   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

User · Answer

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  lt img gt  elements     Source  Can I Use  So we could say that there s no reason to use  lt object gt  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  lt object gt   tho it s perfectly safe to use it with  lt amp-img gt  and use it inline too  you shouldn t mix serviceworker fetch handler with any kind of embed  so having an  lt object gt  tag might keep your PWA from being really offline capable

User · Answer

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   x000D   x000D   function     x000D       img   on  error   function    x000D      var image     this  attr  src    x000D      if       svg   i test  image      x000D          this  attr  src   image replace   svg     png     x000D        x000D         x000D     jQuery   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt img src  https   jsfiddle net img logo svg  gt  x000D   x000D   x000D

User · Answer

The best option is to use SVG Images on different devices      lt img src  your-svg-image svg  alt  Your Logo Alt  onerror  this src  your-alternative-image png   gt

User · Answer

You can insert a SVG indirectly using  lt img gt  HTML tag and this is possible on StackOverflow following what is described below  I have following SVG file on my PC  lt  xml version  quot 1 0 quot  encoding  quot UTF-8 quot   gt   lt  DOCTYPE svg PUBLIC  quot -  W3C  DTD SVG 1 1  EN quot   quot http   www w3 org Graphics SVG 1 1 DTD svg11 dtd quot  gt   lt svg xmlns  quot http   www w3 org 2000 svg quot  xmlns xlink  quot http   www w3 org 1999 xlink quot  width  quot 350 quot  height  quot 350 quot  viewBox  quot 0 0 350 350 quot  gt      lt title gt SVG 3 Circles Intersection  lt  title gt        lt circle cx  quot 110 quot  cy  quot 110 quot  r  quot 100 quot              stroke  quot red quot              stroke-width  quot 3 quot              fill  quot none quot                gt       lt text x  quot 110 quot  y  quot 110 quot             text-anchor  quot middle quot            stroke  quot red quot            stroke-width  quot 1px quot             gt  Label      lt  text gt       lt circle cx  quot 240 quot  cy  quot 110 quot  r  quot 100 quot               stroke  quot blue quot               stroke-width  quot 3 quot              fill  quot none quot                gt       lt text x  quot 240 quot  y  quot 110 quot             text-anchor  quot middle quot             stroke  quot blue quot             stroke-width  quot 1px quot             gt  Ticket      lt  text gt       lt circle cx  quot 170 quot  cy  quot 240 quot  r  quot 100 quot               stroke  quot green quot               stroke-width  quot 3 quot               fill  quot none quot                gt       lt text x  quot 170 quot  y  quot 240 quot             text-anchor  quot middle quot             stroke  quot green quot             stroke-width  quot 1px quot             gt  Vecto      lt  text gt   lt  svg gt   I have uploaded this image to https   svgur com After upload was terminated  I have obtained following URL  https   svgshare com i RJV svg  I have then MANUALLY  without using IMAGE icon  added following  html tag  lt img src  quot https   svgshare com i KJV svg quot   gt   and the result is just below  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  lt  xml  gt  element  At begin  I have simply created a SVG file that begins directly with  lt svg gt  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  lt img gt  tag must be added manually  I hope that this answer can help other users

User · Answer

In most circumstances  I recommend using the  lt object gt  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  lt img gt  tag or a CSS background can be used  Inline SVGs or iframes are possible options for some projects  but it s best to avoid  lt embed gt  But if you want to play with SVG stuff like  Changing colors Resize path rotate svg  Go with the embedded one  lt svg gt       lt g gt            lt path gt   lt  path gt       lt  g gt   lt  svg gt

User · Answer

I would personally use an  lt svg gt  tag because if you do you have full control over it  If you do use it in  lt img gt  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    lt svg version  1 0  xmlns  http   www w3 org 2000 svg  viewBox  0 0 3400 2700  preserveAspectRatio  xMidYMid meet   click   goHome     gt     lt g id  layer101  gt       lt 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   gt       lt 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   gt       lt 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   gt       lt 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   gt       lt  g gt     lt  svg gt    then in your css you can simply eg   svg     fill  red      Some resource  SVG tips

User · Answer

From IE9 and above you can use SVG in a ordinary IMG tag    https   caniuse com svg-img   lt img src   static image svg  gt

User · Answer

Found one solution with pure CSS and without double image downloading  It is not beautiful as I want  but it works    lt  DOCTYPE html gt   lt html gt     lt head gt       lt title gt HTML5 SVG demo lt  title gt       lt style type  text css  gt        nicolas cage            background  url  nicolas cage jpg             width  20px           height  15px               fallback               lt  style gt     lt  head gt   lt body gt   lt svg xmlns  http   www w3 org 2000 svg  width  0  height  0  gt       lt style gt       lt   CDATA            fallback   background  none  background-image  none  display  none           gt       lt  style gt   lt  svg gt    lt  -- inline svg -- gt   lt svg xmlns  http   www w3 org 2000 svg  width  40  height  40  gt     lt switch gt        lt circle cx  20  cy  20  r  18  stroke  grey  stroke-width  2  fill   99FF66    gt        lt foreignObject gt            lt div class  nicolas cage fallback  gt  lt  div gt        lt  foreignObject gt     lt  switch gt   lt  svg gt   lt hr  gt   lt  -- external svg -- gt       lt object type  image svg xml  data  circle orange svg  gt           lt div class  nicolas cage fallback  gt  lt  div gt       lt  object gt   lt  body gt   lt  html gt    The idea is to insert special SVG with fallback style   More details and testing process you can find in my blog

User · Answer

I recommend using the combination of   lt svg viewBox    width    height    gt   lt path fill   xxxxxx  d  M203 3 71 6c-            gt  lt  path gt   lt  svg gt

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

Examples related to html

Examples related to svg

Examples related to vector-graphics