Dorokhov.codes

Scalable Vector Graphics (SVG)

Drawing shapes

Tag	Description
`<path />`	It can draw any shapes.
`<line />`	It represents a straight segment connecting two points.
`<rect />`	It represents a rectangle.
`<ellipse />`	It represents an ellipse.
`<circle />`	It represents a circle.
`<text />`	Drawing text.

Inline SVG

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Inline SVG Stoplight</title>
<style></style>
</head>
<body>
    <svg width="140px" height="320px">
        <rect x="20" y="20" width="100" height="280" fill="blue" stroke="black" stroke-width="3" />
        <circle cx="70" cy="80" r="30" fill="red" stroke="black" stroke-width="2" />
        <circle cx="70" cy="160" r="30" fill="yellow" stroke="black" stroke-width="2" />
        <circle cx="70" cy="240" r="30" fill="#40CC40" stroke="black" stroke-width="2" />
    </svg>
</body>
</html>

Standalone SVG

Example of the file.svg:

<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en" height="320px" width="140px" >
    <title>SVG</title>
    
    <style type="text/css">
        ...
    </style>
    
    <!-- drawing goes here -->
    
    <script><![CDATA[
        ...
    ]]></script>
</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.

Set title and language:

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

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. If you have multilingual diagrams, however, you can set the attribute on individual text and metadata elements.

When an SVG <title> element is included like this — as the first child of the root <svg> — it will be used in the same manner as an HTML <title>.

You can add titles to individual parts of a graphic as well, and they’ll show up as tooltips.

Groups

<g stroke="black" stroke-width="2">
    <circle cx="70" cy="80" r="30" fill="red" />
    <circle cx="70" cy="160" r="30" fill="yellow" />
    <circle cx="70" cy="240" r="30" fill="#40CC40" />
</g>

Styles applied to a group will be inherited by the shapes within it.

Groups can associate a single <title> element with a set of shapes that together make up a meaningful part of the graphic. They can be used to apply certain stylistic effects, such as masks or filters on the combined graphic, instead of the individual shapes. Grouping can also be used to move or even hide a collection of elements as a unit.

Specific for some element attributes are not shared styles. For example, geometric attributes are not inherited; if they aren’t specified, they default to zero. And if a circle’s radius is zero, it won’t be drawn at all.

Attributes

Attributes can be set using CSS styles.

rect {
    fill: #0a58ca;
    stroke-width: 3;
}
.light {
    stroke-width: 2;
}

Reusing elements to draw an SVG stoplight

In a standalone SVG we should add the newspace: xmlns:xlink="http://www.w3.org/1999/xlink".

<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en" xmlns:xlink="http://www.w3.org/1999/xlink" height="320px" width="140px" >
    <title>Re-usable Lights Stoplight</title>
    <defs>
        <circle id="light" cx="70" r="30" />
    </defs>
    <rect x="20" y="20" width="100" height="280" fill="blue" stroke="black" stroke-width="3" />
    <g stroke="black" stroke-width="2">
        <use xlink:href="#light" y="80" fill="red" />
        <use xlink:href="#light" y="160" fill="yellow" />
        <use xlink:href="#light" y="240" fill="#40CC40" />
    </g>
</svg>

Gradients

We can define then withing the <defs> section.

<linearGradient />

<radialGradient />

Example:

<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en" xmlns:xlink="http://www.w3.org/1999/xlink" height="320px" width="140px" >
<title>Gradient-Filled Stoplight</title>
<defs>
    <circle id="light" cx="70" r="30" />
    <radialGradient id="red-light-off" fx="0.45" fy="0.4">
        <stop stop-color="maroon" offset="0"/>
        <stop stop-color="#220000" offset="0.7"/>
        <stop stop-color="black" offset="1.0"/>
    </radialGradient>
    <radialGradient id="yellow-light-off" fx="0.45" fy="0.4">
        <stop stop-color="#A06000" offset="0"/>
        <stop stop-color="#804000" offset="0.7"/>
        <stop stop-color="#502000" offset="1"/>
    </radialGradient>
    <radialGradient id="green-light-on" fx="0.45" fy="0.4">
        <stop stop-color="#88FF00" offset="0.1"/>
        <stop stop-color="forestGreen" offset="0.7"/>
        <stop stop-color="darkGreen" offset="1.0"/>
    </radialGradient>
    <linearGradient id="metal" spreadMethod="repeat" gradientTransform="scale(0.7) rotate(75)">
        <stop stop-color="#808080" offset="0"/>
        <stop stop-color="#404040" offset="0.25"/>
        <stop stop-color="#C0C0C0" offset="0.35"/>
        <stop stop-color="#808080" offset="0.5"/>
        <stop stop-color="#E0E0E0" offset="0.7"/>
        <stop stop-color="#606060" offset="0.75"/>
        <stop stop-color="#A0A0A0" offset="0.9"/>
        <stop stop-color="#808080" offset="1"/>
    </linearGradient>
</defs>
    <rect x="20" y="20" width="100" height="280" fill="url(#metal)" stroke="black" stroke-width="3" />
    <g stroke="black" stroke-width="2">
        <use xlink:href="#light" y="80" fill="url(#red-light-off)" />
        <use xlink:href="#light" y="160" fill="url(#yellow-light-off)" />
        <use xlink:href="#light" y="240" fill="url(#green-light-on)" />
    </g>
</svg>

Texts

CSS:

text {
    font: bold 60px sans-serif;
}

<text x="140" y="180" stroke="darkOrange">Andrwe</text>

Working using JS

Interactive Embedded SVG

If you want to use an external SVG file without (most of) the limita‐ tions of images, you can use an embedded <object>, replacing the <img> tag:

<object data="animated-stoplight-scripted.svg" type="image/svg+xml" ></object>

Software to work with SVG

Adobe Illustrator.
Adobe Photoshop.
GIMP (the GNU Image Manipulation Program).
Sketch.
Sodipodi (for Linux systems).
Inkscape (started as a branch of Sodipodi, and is now the more actively developed program). It is available for Linux, Windows, and Mac.

Software to clean SVGs

Software to clean SVGs from redundant code.

SVGO.
Scour.