An Introduction to SVGs

What better way to start learning SVGs than by drawing some shapes?

Here, we have a little monitor drawn using SVG. Or rather, we had a monitor — all the shapes are scattered in the wrong places, with some even having the wrong size.

By changing the properties in the code block below, can you put the monitor back together?

Saving...

The SVG Format

As you can see, SVG code looks a lot like HTML—if you're already comfortable with HTML, then the SVG syntax should look and feel pretty familiar. Just like how HTML is a markup language for documents, SVG is a markup language for images.

All SVGs begin with a root <svg> element, which functions similarly to HTML's <html> element:

<svg>
  <!-- SVG code goes here -->
</svg>

Shapes

Like HTML, SVGs are made up of small building blocks called elements. Each element in an SVG represents a primitive shape, like a circle, rectangle, or polygon:

    <svg viewBox="0 0 100 100">
      <rect
        fill="crimson"
        x="20"
        y="20"
        width="60"
        height="60"
      />
    </svg>
    • <svg viewBox="0 0 100 100">
      <circle
        fill="darkorchid"
        stroke="currentColor"
        stroke-width="3"
        cx="50"
        cy="50"
        r="30"
      />
    </svg>
    • <svg viewBox="0 0 100 100">
      <polygon
        fill="none"
        stroke="yellow"
        stroke-width="3"
        points="50 20, 20 80, 80 80"
      />
    </svg>

The appearance of each shape is controlled through attributes—the circle element, for example, has attributes like cx, cy, and r that control the position and size of the circle:

Some SVG attributes, like fill and stroke, are also valid CSS properties—which means you can also style SVGs using CSS:

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="20" />
</svg>
circle {
  fill: red;
}

Styling SVGs using CSS is great because we can take advantage of certain CSS features like animations and transitions. At the same time though, there are some CSS features that don't work with SVGs, and some SVG features that don't work with CSS.

We'll dive deeper into how SVGs and CSS play together in Module 1, so stay tuned!

Layout

In HTML, two <p> elements written one after the other will cause them to stack on top of each other:

<p>First text</p>
<p>Another text</p>

While the same two texts drawn in an SVG will be drawn on top of each other:

<svg fill="currentColor">
  <text>First text</text>
  <text>Another text</text>
</svg>

First text

Another text

The reason this happens is because HTML comes with a layout algorithm—the browser automatically decides where to place each element based on other elements in the same HTML document.

SVGs, on the other hand, don't have a layout algorithm—it's completely up to you to decide where each element should be placed.

This means if you want the second text to show up beneath the first text, you need to manually move the second text down using the y attribute:

<svg fill="currentColor">
  <text>First text</text>
  <text y="16">Another text</text>
</svg>

Later in this module, we'll take a closer look at how exactly positioning works in SVGs.

Embedding SVGs

There are two ways to embed SVGs into your websites—inlining and externally referencing.

Inlining the SVG means to embed the SVG code directly in the HTML:

<div>
  <p>Here's an SVG:</p>
  <svg>
    <circle cx="50" cy="50" r="40" />
  </svg>
</div>

This works because SVG code is also perfectly valid HTML!

Externally referencing the SVG means to load the SVG as an image file using something like the <img> element:

<div>
  <p>Here's an SVG:</p>
  <img src="circle.svg" />
</div>

Or using the url function in CSS:

div {
  background-image: url(circle.svg);
}

When you do this, you need to explicitly mark the SVG as an image using the xmlns attribute:

<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" />
</svg>

/index.html

Here's an SVG:

Inlining SVGs allows you to manipulate the SVG using JavaScript just like regular HTML elements, but it typically means more DOM nodes (or larger JavaScript bundles, if you're using a component-based UI library like React).

On the other hand, externally referencing SVGs allows you to cut down on JavaScript bundle size and allows your browser to cache the SVG, but your SVG may not load immediately and you're more limited on animation options.

Practice

Now that we've covered a little bit about SVGs, let's try to fix a different SVG icon: