DEV Community

Cover image for SVG essentials. Introduction
Julia Shlykova
Julia Shlykova

Posted on

SVG essentials. Introduction

#tutorial #html #learning

SVG is an XML-based markup language that stands for Scalable Vector Graphics. As the name suggests, images in SVG format are defined by mathematical formulas, not by grids and pixels (in contrast to raster graphics). It makes SVG format ideal for icons, logos and line drawings:

  • they can resize without loss of quality,
  • the file size is much smaller than for raster graphics.

Furthermore, we can target elements in an SVG to change their presentation with CSS - fit color to our primary one, add some animation and more! If you need vector images on web, isn't it the best image format?

Table of contents

  1. SVG in HTML document
  2. SVG as XML language
  3. SVG image structure

SVG in HTML document

There are several ways to display an SVG image on a webpage:

  • directly embedded (inlining SVG): 
<html>
  <head>
  </head>
  <body>
    <svg>
    </svg>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

We can manipulate this SVG image with JavaScript and CSS. However, the browser can't cache inline SVG.

  • using img element: 
<img src="flower.svg" alt="flower" />
Enter fullscreen mode Exit fullscreen mode

We can't control the SVG image with JavaScript. CSS works only inside SVG code. The browser caches the image.

  • using object element: 
<object data="flower.svg" type="image/svg+xml"></object>
Enter fullscreen mode Exit fullscreen mode

It has similar fallbacks as in with img element

  • using iframe element: 
<iframe src="flower.svg"></iframe>
Enter fullscreen mode Exit fullscreen mode

Since we can open SVG image in the browser as it is, we can embed SVG file in iframe. However, every iframe requires more memory and other computing resources.

SVG as XML language

There are main rules for SVG code since it's XML language (that may differ from HTML):

  • case-sensitivity,
  • closing tags,
  • attribute values are in quotation marks (single or double).

SVG image structure

For instance, you got the SVG image created in graphic design software:

Let's analyze the code line by line.

<?xml version="1.0" encoding="UTF-8"?>
Enter fullscreen mode Exit fullscreen mode

The first line identifies file as XML. It's not necessary for SVGs, used in web, unless encoding is other than UTF-8.

<svg
 xmlns="http://www.w3.org/2000/svg"
 viewBox="0 0 100 100"
>
...
</svg>
Enter fullscreen mode Exit fullscreen mode
  • It's SVG root element. All drawing happens inside this element.
  • xlmns attribute declares XML namespace: the link to svg tells the browser that this document uses vocabulary defined in SVG.
  • viewBox defines a drawing region in abstract units characterized by:
    • an origin min-x min-y. In our example, it's 0 0,
    • a size (width, height). Here, it's 100 100.
    • All shapes and lines are drawn in respect to this drawing region.
  • width and height can be set inside svg tag: width="100" height="100" that means image has 100px as width and height. 
<defs>
...
</defs>
Enter fullscreen mode Exit fullscreen mode

defs element defines style or elements, that will be referenced later. In this example, defs contains style element that is familiar from html structure. However, it can also define shapes, gradients, symbols.

<defs>
<style>
    .d {
        fill: #d2693a;
    }

    .d,
    .e {
        stroke: #000;
    }

    .e {
        fill: #8fcc93;
    }
</style>
</defs>
Enter fullscreen mode Exit fullscreen mode

It must look similar for CSS users, there are classes with properties: fill is like background-color for SVG element, stroke is border-color.

<g>
...
</g>
Enter fullscreen mode Exit fullscreen mode

This tag groups different objects. In Adobe Illustrator each layer transforms into <g> element on export as SVG.

<g>
<path class="d" d="M44.11,53.83s23,33.9,0,33.9,0-33.9,0-33.9Z" />
...
<circle class="e" cx="44.11" cy="44.11" r="14.5" />
</g>
Enter fullscreen mode Exit fullscreen mode

Finally, some actual drawing: path is used for more complicated objects, while circle, rect, line, ellipse, polygon are basic shapes. Since SVG is XML language, it's required to close all tags and we see that there's / before closing bracket in circle and path.

Top comments (0)

Read next

0x3d_site profile image

Python Automation: Save Time, Work Smarter

0x3d Site -

resource_bunk_1077cab07da profile image

Automate Your Boring Tasks Now!

Resource Bunk -

sarthak_niranjan_3bd6cb5f profile image

Best Ever CoPilot? This is Supermaven for Beginners

Sarthak Niranjan -

james_courtney_5881df299c profile image

I need help deciding how to build my idea.

James Courtney -