Simple line
1 svg 2 width 800 3 height 450 4 viewBox 0 0 21.813 23.453 5 line 6 x1 20 7 y1 20 8 x2 120 9 y2 20 10 stroke black 11 data-name alfio
<?xml version="1.0"?>
<svg xmlns='http://www.w3.org/2000/svg' width='800' height='450' viewBox='0 0 21.813 23.453'>
<line dataName='alfio' stroke='black' x1='20' y1='20' x2='120' y2='20' style='stroke:black;'></line>
</svg>
rect shape
1 svg 2 rect
<?xml version="1.0"?>
<svg xmlns='http://www.w3.org/2000/svg'>
<rect></rect>
</svg>
circle shape
1 svg 2 circle
<?xml version="1.0"?>
<svg xmlns='http://www.w3.org/2000/svg'>
<circle></circle>
</svg>
rect shape
1 svg 2 rect
<?xml version="1.0"?>
<svg xmlns='http://www.w3.org/2000/svg'>
<rect></rect>
</svg>
circle shape
1 svg 2 circle
<?xml version="1.0"?>
<svg xmlns='http://www.w3.org/2000/svg'>
<circle></circle>
</svg>
Using defs and xlink:ref
1 svg 2 @ aria-hidden true 3 class h-3.5 w-3.5 rounded-full mr-2 4 xmlns http://www.w3.org/2000/svg 5 xmlns:xlink http://www.w3.org/1999/xlink 6 id flag-icon-css-cn 7 viewBox 0 0 512 512 8 defs 9 path 10 id a 11 fill #ffde00 12 d M1-.3L-.7.8 0-1 .6.8-1-.3z 13 path 14 fill #de2910 15 d M0 0h512v512H0z 16 use 17 @ width 30 18 @ height 20 19 @ transform matrix(76.8 0 0 76.8 128 128) 20 @ xlink:href #a 21 use 22 @ width 30 23 @ height 20 24 @ transform rotate(-121 142.6 -47) scale(25.5827) 25 @ xlink:href #a 26 use 27 @ width 30 28 @ height 20 29 @ transform rotate(-98.1 198 -82) scale(25.6) 30 @ xlink:href #a 31 use 32 @ width 30 33 @ height 20 34 @ transform rotate(-74 272.4 -114) scale(25.6137) 35 @ xlink:href #a 36 use 37 @ width 30 38 @ height 20 39 @ transform matrix(16 -19.968 19.968 16 256 230.4) 40 @ xlink:href #a
<?xml version="1.0"?>
<svg id='flag-icon-css-cn' class='h-3.5 w-3.5 rounded-full mr-2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' aria-hidden='true'>
<defs>
<path id='a' fill='#ffde00' d='M1-.3L-.7.8 0-1 .6.8-1-.3z'></path>
</defs>
<path fill='#de2910' d='M0 0h512v512H0z'></path>
<use width='30' height='20' transform='matrix(76.8 0 0 76.8 128 128)' xlink:href='#a'></use>
<use width='30' height='20' transform='rotate(-121 142.6 -47) scale(25.5827)' xlink:href='#a'></use>
<use width='30' height='20' transform='rotate(-98.1 198 -82) scale(25.6)' xlink:href='#a'></use>
<use width='30' height='20' transform='rotate(-74 272.4 -114) scale(25.6137)' xlink:href='#a'></use>
<use width='30' height='20' transform='matrix(16 -19.968 19.968 16 256 230.4)' xlink:href='#a'></use>
</svg>
Shape with css styles
1 svg 2 width 899 3 height 868 4 viewBox 0 0 1200 1200 5 fill none 6 xmlns http://www.w3.org/2000/svg 7 class css-1i6zs05 8 ::style 9 css 10 . year 11 fill #00ff00 12 @ dominant-baseline middle 13 @ text-anchor middle 14 . legend 15 fill #000000 16 @ dominant-baseline middle 17 @ text-anchor middle 18 font-size 13px
<?xml version="1.0"?>
<svg class='css-1i6zs05' xmlns='http://www.w3.org/2000/svg' fill='none' width='899' height='868' viewBox='0 0 1200 1200'>
<style>
/*
artifact generator: /app/node_modules/@wizzi/plugin.css/lib/artifacts/css/document/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.svg.ittf
utc time: Wed, 22 Oct 2025 14:22:01 GMT
*/
.year {
fill: #00ff00;
dominant-baseline: middle;
text-anchor: middle;
}
.legend {
fill: #000000;
dominant-baseline: middle;
text-anchor: middle;
font-size: 13px;
}
</style>
</svg>
Shape with script
1 svg 2 # Svg can be scripted 3 rect 4 x 20 5 y 30 6 width 100 7 height 50 8 stroke blue 9 fill yellow 10 ::script 11 module 12 kind es6 13 function sum 14 param a 15 param b 16 return a + b 17 _ sum(2, 2)
<?xml version="1.0"?>
<svg xmlns='http://www.w3.org/2000/svg'>
<rect fill='yellow' stroke='blue' x='20' y='30' width='100' height='50' style='stroke:blue;'>
<script>
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.svg.ittf
utc time: Wed, 22 Oct 2025 14:22:01 GMT
*/
function sum(a, b) {
return a + b;
}
sum(2, 2);
</script>
</rect>
</svg>