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:

  1. There is advantages to that sometimes (fast!)
  2. There are ways to make it external (also fast!)

Comments

  1. User Avatar
    Caroline Horn
    Permalink to comment#

    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?

  2. User Avatar
    TFetty
    Permalink to comment#

    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?

    • User Avatar
      Geoff Graham
      Permalink to comment#

      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; }).

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag