SVG essentials. Introduction

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…


This content originally appeared on DEV Community and was authored by Julia Shlykova

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>

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" />

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>

It has similar fallbacks as in with img element

  • using iframe element: 
<iframe src="flower.svg"></iframe>

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"?>

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>
  • 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>

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>

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>

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>

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.


This content originally appeared on DEV Community and was authored by Julia Shlykova


Print Share Comment Cite Upload Translate Updates
APA

Julia Shlykova | Sciencx (2025-03-05T03:00:00+00:00) SVG essentials. Introduction. Retrieved from https://www.scien.cx/2025/03/05/svg-essentials-introduction/

MLA
" » SVG essentials. Introduction." Julia Shlykova | Sciencx - Wednesday March 5, 2025, https://www.scien.cx/2025/03/05/svg-essentials-introduction/
HARVARD
Julia Shlykova | Sciencx Wednesday March 5, 2025 » SVG essentials. Introduction., viewed ,<https://www.scien.cx/2025/03/05/svg-essentials-introduction/>
VANCOUVER
Julia Shlykova | Sciencx - » SVG essentials. Introduction. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/03/05/svg-essentials-introduction/
CHICAGO
" » SVG essentials. Introduction." Julia Shlykova | Sciencx - Accessed . https://www.scien.cx/2025/03/05/svg-essentials-introduction/
IEEE
" » SVG essentials. Introduction." Julia Shlykova | Sciencx [Online]. Available: https://www.scien.cx/2025/03/05/svg-essentials-introduction/. [Accessed: ]
rf:citation
» SVG essentials. Introduction | Julia Shlykova | Sciencx | https://www.scien.cx/2025/03/05/svg-essentials-introduction/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts