Basic terms | Dorokhov.codes | Engineering Excellence!

There are two types of files that can contain SVG markup for the web: SVG files and HTML files.

A .svg file known as a standalone SVG file.

SVG code in a .html is known as inline SVG.

Length units

Length units in SVG are pixels by default.

An in (inch) unit will always equal 96px.

Inline SVG

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Inline SVG</title>
</head>
<body>
    <svg width="400px" height="400px"></svg>
</body>
</html>

We can also set the SVG dimensions using the CSS width and height properties applied to the

Standalone SVG

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    xml:lang="en" 
    height="320px" 
    width="140px">
    <!-- Drawing goes here -->
</svg>

The first and most important of the attributes is the declaration of the SVG namespace: xmlns="http://www.w3.org/2000/svg".

An SVG in its own file is always treated as XML. Web browsers will not render (draw) the SVG image without the namespace. The namespace identifier confirms that this is a Scalable Vector Graphics document, as opposed to some custom XML data format that just happens to use the svg acronym for its root element.

Custom namespaces

Many SVG documents have other namespace declarations as well, indicated by an xmlns:prefix attribute, where the prefix will be reused elsewhere in the document.

Title

One metadata element that you should always include is a title, in a <title> element. To be recognized as the title of your SVG as a whole, it should be the first child of your <svg> element. The following code shows how it is added to the SVG file:

<svg xmlns="http://www.w3.org/2000/svg" height="320px" width="140px">
    <title xml:lang="en">My SVG image</title>
</svg>

The SVG <title> element is much more flexible than its HTML equivalent; you can add titles to individual parts of a graphic as well, and they’ll show up as tooltips.

`xml:lang` attribute

The xml:lang attribute, on the <title> element, is the XML equivalent to the HTML lang attribute. It defines the human language of any text content in the file, so that screen readers and other software can make appropriate adjustments.

You don’t need to declare the xml namespace prefix: it is reserved in all XML files. To make things even simpler, SVG 2 defines a plain lang attribute, without XML prefixes, to replace xml:lang.

The xml:lang attribute can be set on any element, applying to its child content. This behavior is directly equivalent to the lang attribute in HTML. We could have set it on the <svg> element, and it would still apply to the title text.

How to add styles

<svg xmlns="http://www.w3.org/2000/svg" height="320px" width="140px">
    <title xml:lang="en">My SVG image</title>
    <style> ... </style>
    <!-- Drawing goes here -->
</svg>

The <style> element can be included anywhere, but it’s usually best to keep it before or after the <defs>, near the top of the file.

The contents of the <style> block can be (but don’t have to be) contained in an XML “character data” section. This avoids parsing errors if your comments contain stray <, >, or & characters.

The start of the character data region is indicated by <! [CDATA[ and the end by ]]>, like this:

<style type="text/css">
    <![CDATA[ 
    circle { /* Styles for <circle>s */ 
        fill: red; /* red & purple are my favorite colors */ 
    } 
    ]]>
</style>

Notes about embedding SVG in web pages

There are three main ways that SVG can be added to web pages:

SVG as an image (<img />, <picture />).
SVG as an embedded document (<object /> ,<embed />, <iframe />).
inline SVG.

There are some other important limitations of SVG used as images:

SVG in images won’t load external files (such as external stylesheets or embedded photos).
SVG in images won’t receive user interaction events (such as mouse clicks or hover movements).
SVG in images can’t be modified by the parent web page’s scripts or styles.

The limitations are the same if you reference an SVG image from within CSS, as a background image or other decorative graphic.

Another option:

<object data="image.svg" type="image/svg+xml"></object>

If you try this, you’ll note that the graphic doesn’t scale to fit like the image did. Again, that can be fixed with a viewBox attribute.

We could also use an <embed> element or <iframe> with much the same effect.