title: Caching svg files. Use an img tag or svg tag?
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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</p>
  
  <p>My current resolution is this css on an img tag with an svg in the src attribute.</p>
  
  <pre><code>.myImage{ max-width: 100%; height: auto; max-height: 55vh;}
  </code></pre>
  
  <p>What I really want to do is this but obviously I can not:</p>
  
  <pre><code> &lt;svg data='images/mydoc.svg' viewBox="0 0 250 75" preserveAspectRatio="xMinYMin meet"&gt;
   &lt;/svg&gt;
  </code></pre>
  
  <p>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? </p>