SVG

SVG gives you the wings

SVG is a big world, with a lot of options and a lot of developments and changes happening on an almost daily basis. You can find a lot about SVG on the web. You will find some links along this lesson tutorials and demos. In addition, see 'sites' tab and look there at the "Compendium" which has a long categorized list of links to SVG articles.

SVG is HTML for Graphics

Scalable Vector Graphics (SVG) is a graphic standard for describing two-dimensional graphics on the Web. It supports interactivity and animation. It has very good browser support.

SVG is based on the XML and vector graphics technology (uses text-based XML commands) and developed by the W3C organization since 2001.

SVG graphics can consist of paths, images, and/or text that are able to be scaled and resized without losing image quality. This is since SVG is not pixel based. SVG works on a numeric description of the shapes. The image quality remains good while zooming in the image.

The capability to scale vector graphics without losing image quality is the primary benefit of using SVG files. Because vector graphics are composed of primitives, it is possible to translate, rotate, and scale individual components of the image independently, and to apply other effects.

SVG main possibilities:

SVG is Scalable & Resolution-Independent.
SVG is best for icons, logos, charts, illustrations, simple graphics.
SVG can be created by hand in a text editor or by using SVG tools like Adobe Illustartor, Inkscape, Sketch ...
We can use svg image file (.svg) in every place image is used (background, img, ...). Graphics defined in SVG have smaller file sizes than their PNG/JPEG equivalents.
In addition to SVG images, SVG can be defined inline. There are other possibilities (for example by object tag), which are not covered here. See The Best Way to Embed SVG on HTML (2019) for more details.
SVG primitives can be manipulated by CSS or JavaScript.
SVG comes with its built-in graphics effects such as transforms, clipping, masking operations, gradients, filters, animations (many of them were taken to CSS from SVG).

Just to taste SVG possiblities look at Card Expansion, Puzzle, Animation, Cool, Animals Animation, Path Animation.

SVG as an Image

SVG can be used in every place a regular picture can be used: img tag, CSS background, iframe.... SVG file can be obtained for example by use of Adobe Illustrator, Inkscape or other.

If advanced SVG features are used, such as CSS or scripting, then HTML5 <object> tag is preferred or use it as inline SVG (see later in this article).

Example:

Below we have two rows of images (actually we have exactly two images). The first row is built from svg image file (.svg). The second row is png file (.png). Both svg and png images have exactly the same size. Image width, as we see it on the display, is set by CSS. The height is according to the image aspect ratio. The images are defined by the following HTML and CSS:

HTML:
    <img src="images/dog.svg" alt="#" class="big">
    <img src="images/dog.svg" alt="#" class="normal">
    <img src="images/dog.svg" alt="#" class="small">

    <img src="images/dog.png" alt="#" class="big">
    <img src="images/dog.png" alt="#" class="normal">
    <img src="images/dog.png" alt="#" class="small">
CSS:
    .big {  width: 360px; }
    .normal { width: 260px; }
    .small { width: 60px; }

Try to zoom-in and see the difference between png and svg images of the same size. Do you see any difference?

Inline SVG

SVG is a language for describing 2D graphics in XML format. SVG code can be placed in the HTML <svg> tag. The code can be written or taken for example from the Illustrator, text editor or SVG viewer.

Using Inline SVG allows styling it with CSS and allows other possibilities.

Important: SVG, being an XML language, is case-sensitive, so the attribute must be written that way if it is to be recognized.

CSS and SVG have a lot in common. A lot of the features that we have in CSS today were imported from SVG. Thus, in SVG we can apply filtering, blending, animation and other features. There are features supported by SVG, but in CSS they are currently in a development state (for example clipping, masking).

Note that complex SVG makes the rendering slow (anything that uses the DOM a lot will be slow) and it is not suited for game applications.

Example:

The following circle is drawn by the SVG tag.

The HTML of this circle is:

<svg width="100" height="100">
    <circle cx="50" cy="50" r="50" fill="red" />
</svg>