Basic SVG

by epblog

HTML

<svg>
    <!-- a circle is drawn based on its center coordinates, cx and cy -->
    <circle cx="100" cy="100" r="30" fill="blue" />

    <!-- a basic rectangle -->
    <rect x="70" y="130" width="60" height="100" fill="blue" />

    <!-- a basic line. the width of the line comes from the embedded line css style -->
    <line x1="100" y1="100" x2="100" y2="200" stroke="white" />
    
    <!-- in the above examples, I used attributes to set the style of elements, e.g. "fill" and "stroke"
         you can also use a style string.
     -->
    <line x1="200" y1="100" x2="200" y2="200" style="stroke: red; stroke-width: 10;" />
    <!-- note in the above line, the stroke-width does not get inherited from the embedded css style.
         This makes sense, because when you use the style attribute, you are using css and css rules
         dictate that inline style should take precedence over the embedded one. -->
</svg>

CSS

line
{
    stroke-width: 3;
}