SVG

Eine Snippet-Sammlung für SVG.

Links:

• Blog-Artikel: How to work with SVG icons
• CSS-Klassen in SVG

Wichtige Elemente

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 100 100"
     width="100"
     height="100"
>
    <path d="M0,0 L10,0 l0,10 Z" />
    <circle cx="5" cy="5" r="4" />
    <rect x="50" y="50" width="10" height="10" />
    <line x1="0" y1="30" x2="20" y2="50" />
    <text
        x="0" y="0"
        dy="0.35em|0.8em"
        textAnchor="start|middle|end"
    >
        My text
    </text>
    <g transform="translate(10, 10) scale(1.5) rotate(10)"></g>
</svg>

Wichtige Styles

stroke-width: 2;
stroke: white;
stroke-opacity: 0.2;
stroke-linecap: butt | round | square | inherit;
stroke-linejoin: miter | round | bevel | inherit;
fill: blue;
fill-opacity: 0.2;