Caching svg files. Use an img tag or svg tag?

Question

I have many large SVG files (roughly 200kb after reducing the size with online tools). I really don't want the visitor to download all that text from my server each time they visit. I want to take advantage of CDN's and varnish caching.

If I use an SVG tag, the browser nor a CDN or Varnish will cache the svg code in the html doc. SVG has no src property.

If I use an image tag it will be cached but then I can not take advantage of the preserveAspectRatio and viewBox that the SVG tag has. I'd have to deal with div's and css for images to maintain aspect ratio when resizing the browser window. Something you'd think would be easier with SVG

My current resolution is this css on an img tag with an svg in the src attribute.

.myImage{ max-width: 100%; height: auto; max-height: 55vh;}

What I really want to do is this but obviously I can not:

 <svg data='images/mydoc.svg' viewBox="0 0 250 75" preserveAspectRatio="xMinYMin meet">
 </svg>

Im looking for ideas on how to handle SVGs. Do I really need to wrap all my img tag svg images in div tags with css to maintain aspect ratio on browser resizes? I just feel there is an easier way, something I am missing?

Answer 1

Your sizing CSS is doing too much and not enough at the same time. You say you want to have a max-width , but you do not give a width. You only give a auto height in addition to a max-height . Any image with a size of 0px by 0px could fullfill these conditions.

What do you want to happen if the SVG is very wide but not very high? To me it seems you want it to have the full 100% width, but the height to shrink. What do you want to happen if the SVG is so high that it would surpass the 55vh limitation if it stretched the full width? To me it seems you want it to stay smaller and move to the left.

For this, your max-width rule is superfluous, and a width rule is missing.

You can achieve that easily (with the possible exeption of older IE versions ). - For this example, I am setting the SVG as a data uri for a HTML <img> source. This way it acts the same with regards to CSS and sizing as if it was an external file.

 .myImage{ width: 100%; max-height: 55vh; } 

 <img class="myImage" src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 75' preserveAspectRatio='xMinYMin meet'><rect width='250' height='75' fill='green'/></svg>"> 

The point here are the viewBox and preserveAspectRatio : they are applied, whether the SVG is inlined or included from an external file. You define an area for the <img> tag, and the viewBox rectangle is fitted inside, following the aspect ratio rules.

In short, if this sizing behavior fullfills your needs, go ahead and include external SVG files through <img> tags.