What is the best method to implement SVGs in a website?
At the moment, I create images in Illustrator & copy the SVG code directly into the html. I figure doing this reduces http requests of several images speeding loading, opposed to using several img tags.
Doing this leaves me struggling to resize the element for smaller screens as would be easily done with an image tag.
Could anyone recommend a good practice for using and resizing SVG images?
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="75px"
height="75px" viewBox="0 0 75 75" enable-background="new 0 0 75 75"
xml:space="preserve">
<!--lots of <g> and <path> -->
</svg>
This is the code that Illustrator produces with the paths taken out. It creates the size of the element based on the artboard size I worked on in Illustrator.
How can I resize the element to fit responsive to its container?
I tried deleting viewbox and width/height attributes which makes the svg container treble in size and the img path content doesn't show.
