svg

svg(scalable vector graphics) is the vector, composed of text data.

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 0h5v1h-5v-1Z' 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