Perhaps the best way to use SVG is “Inline SVG” – that is, putting SVG code right into your HTML. It works great!
See the Pen gpcDi by Chris Coyier (@chriscoyier) on CodePen.
A lot of this series will be about all the great stuff you can do using inline SVG, so I wanted to be very clear about what it is and how it works.
If you’re concerned about having all that code all up in your HTML, know that:
- There is advantages to that sometimes (fast!)
- There are ways to make it external (also fast!)
What if I want to resize the inline svg but not have it maintain aspect ratio? Can you stretch an inline svg using
position: absolute?Hey Caroline,
Yep, you can! Play with this tester for preserveAspectRatio and you’ll get it.
That’s an attribute on the
<svg>itself.Hi, when I try to get the svg code to use as inline html it’s huge, is that normal? I want it to look like your code, but it’s gigantic. It’s not a very complicated image, just one line of text with a shadow. What am I doing wrong?
Yeah, that can defintely be normal. You will either want to define the width and height of the SVG explicitly in the SVG code (e.g.
) or implicitly in CSS (e.g.svg { height: 100px; width: 100px; }).Hi there, when I compress svg files in sketch with svgo or online with nano i can no longer style the svg elements, is there specific settings i need to set the compression plugin to?
Hey Matthias! You might wanna crack open the SVG file in a code editor and see if any of the styles are inlined — if they are, then strip them out and that should let you modify things in your stylesheet. :)
Thanks for this post Chris! I was wondering what is best practice with SVG.