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, 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 SVG in HTML document SVG as XML language SVG image structure SVG in HTML document There are several ways to display an SVG image on a webpage: directly embedded (inlining SVG): We can manipulate this SVG image with JavaScript and CSS. However, the browser can't cache inline SVG. using img element: We can't control the SVG image with JavaScript. CSS works only inside SVG code. The browser caches the image. using object element: It has similar fallbacks as in with img element using iframe element: 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. The first line identifies file as XML. It's not necessary for SVGs, used in web, unless encoding is other than UTF-8. ... 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 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. .d { fill: #d2693a; } .d, .e { stroke: #000; } .e { fill: #8fcc93; } It must look similar for CSS users, there are classes with properties: fill is like background-color for SVG element, stroke is border-color. ... This tag groups different objects. In Adobe Illustrator each layer transforms into element on export as SVG. ... 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.

Mar 5, 2025 - 04:12

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?

SVG in HTML document
SVG as XML language
SVG image structure

SVG in HTML document

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

directly embedded (inlining SVG):

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

using img element:

 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:

 data="flower.svg" type="image/svg+xml">

It has similar fallbacks as in with img element

using iframe element:

 src="flower.svg">

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.

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


 xmlns="http://www.w3.org/2000/svg"
 viewBox="0 0 100 100"
>
...

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

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

...

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


 class="d" d="M44.11,53.83s23,33.9,0,33.9,0-33.9,0-33.9Z" />
...
 class="e" cx="44.11" cy="44.11" r="14.5" />

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.