SVG Getting started with SVG Inline SVG


Example

Inline SVG allows SVG markup, written within HTML, to generate graphics in the browser.

When using SVG inline, a DOCTYPE is not strictly required. Instead just the <svg> opening and closing tags together with either a viewBox or width and height attributes will suffice:

<svg width="100%" height="100%">
    <!-- SVG elements go here -->
</svg>

The <svg> fragment above acts as both a container and a structural element. This fragment establishes its own coordinate system.

Below is an example of rendering an SVG fragment with some content. It will produce a rectangle with "Hello World!" text within it.

<svg width="50%" viewBox="0 0 10 10">
    <rect x="1" y="1" width="5" height="3" fill="teal" />
    <text x="2" y="2" font-family="Palatino, Georgia, serif" font-size="3%" font-weight="bold" fill="white">Hello World!</text>
</svg>

Result:

Simple SVG example output