SVG: Basics

A basic SVG file looks like this.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns=""
        <svg x="50" y="50">
                                d="m 355,250 a 120,100 0 1 1 -350,0 100,100 0 1 1 350,0 z" />

It starts as a normal XML file, then has the svg tag, with the svg namespace. You can pass the width and height to such.

You can also embed svg elements, meaning you can position sub-svg images. A g tag does something similar, without the ability to specify an x and y position, but you can apply transformations to such and have its children inherit its styles.

The path command here is advanced, but it basically draws an eclipse. More on that later.

If you save it as file.svg you can view it in chrome or firefox easily. Or view it in which only seems to work in chrome for me.


Edit on github
comments powered by Disqus
Click me