svg



hello world(data uri)


code

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 -1 22 2' height='2rem'>
    <text font-size='2' text-anchor='start' dominant-baseline='central' fill='currentColor'>hello world</text>
</svg>

svg

hello world


SVGElement

SVGSVGElement EventTarget> Node> Element> SVGElement> SVGGraphicsElement> SVGSVGElement

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='{x y width height}'/>

path

SVGPathElement EventTarget> Node> Element> SVGElement> SVGGraphicsElement> SVGGeometryElement> SVGPathElement

<path id='' d='{commands}' fill='{color}' stroke='{color}' stroke-width='{width}'/>

commands

move
Mx y
mdx dy
line
Lx y
ldx dy
horizontal line
Hx
hdx
vertical line
Vy
vdy
elliptical arc curve
Arx ry angle large-arc-flag sweep-flag x y
arx ry angle large-arc-flag sweep-flag dx dy
quadratic bézier curve
Qx1 y1 x y
qdx1 dy1 dx dy
cubic bézier curve
Cx1 y1 x2 y2 x y
cdx1 dy1 dx2 dy2 dx dy
close path
Z
z

template

SVGSymbolElement EventTarget> Node> Element> SVGElement> SVGGraphicsElement> SVGSymbolElement

<symbol id='' viewBox='{x y width height}'>

SVGUseElement EventTarget> Node> Element> SVGElement> SVGGraphicsElement> SVGUseElement

<use xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='{SVGSymbolElement id}'/>

text

SVGTextElement EventTarget> Node> Element> SVGElement> SVGGraphicsElement> SVGTextContentElement> SVGTextPositioningElement> SVGTextElement

<text font-size='{size}' text-anchor='start' dominant-baseline='central' fill='{color}' stroke='{color}' stroke-width='{width}'/>

SVGTSpanElement EventTarget> Node> Element> SVGElement> SVGGraphicsElement> SVGTextContentElement> SVGTextPositioningElement> SVGTSpanElement

<tspan/>

SVGTextPathElement EventTarget> Node> Element> SVGElement> SVGGraphicsElement> SVGTextContentElement> SVGTextPathElement

<textPath xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='{SVGPathElement id}' fill='{color}' stroke='{color}' stroke-width='{width}'/>


line(data uri)


code

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 10 5' height='8rem' stroke-opacity='.5'>
    <!--ldx dy-->
    <path d='M.5 .5l9 4' stroke='red'/>
    <!--hdx   -->
    <path d='M.5 .5h9' stroke='green'/>
    <!--   vdy-->
    <path d='M.5 .5v4' stroke='blue'/>
</svg>

svg



elliptical arc curve(data uri)


code

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 10 5' height='8rem' stroke-opacity='.5' fill='none'>
    <!--arx ry angle large-arc-flag sweep-flag dx dy-->
    <path d='M9.5 2.5a4.5 2 0 0 0 -4.5 2' stroke='red'/>
    <path d='M9.5 2.5a4.5 2 0 1 0 -4.5 2' stroke='green'/>
    <path d='M9.5 2.5a4.5 2 0 0 1 -4.5 2' stroke='blue'/>
</svg>

svg



rectangle(data uri)


code

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 5 1' height='2rem'>
    <path d='M0 0h5v5h-5v-5Z' fill='currentColor'/>
</svg>

svg



ellipse(data uri)


code

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 10 2' height='2rem'>
    <path d='M5 0a5 1 0 0 1 0 2a5 1 0 0 1 0 -2Z' fill='currentColor'/>
</svg>

svg