svg

svg(scalable vector graphics)とは、vectorであり、テキストデータで構成されるfile形式です。


hello world


code

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 11 2' height='2rem'>
    <text font-size='2' font-family='monospace' dominant-baseline='text-before-edge' fill='currentColor'>hello world</text>
</svg>

svg

hello world

uri

data uri


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

name absolute relative
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}' font-family='monospace' dominant-baseline='text-before-edge' 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


code

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

svg


uri

data uri


elliptical arc curve


code

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 9 15' height='30rem' fill='none'>
    <!--            arx ry  angle large-arc-flag sweep-flag dx dy-->
    <path d='M1.5  1a1  1.5   0   0              0          -1 1.5' stroke='red'/>
    <path d='M4    1a1  1.5  60   0              0          -1 1.5' stroke='red'/>
    <path d='M6.5  1a1  1.5 120   0              0          -1 1.5' stroke='red'/>
    <path d='M9    1a1  1.5 180   0              0          -1 1.5' stroke='red'/>
    <path d='M1.5  6a1  1.5   0   0              0          -1 1.5' stroke='green'/>
    <path d='M4    6a1  1.5   0   1              0          -1 1.5' stroke='green'/>
    <path d='M1.5 11a1  1.5   0   0              0          -1 1.5' stroke='blue'/>
    <path d='M4   11a1  1.5   0   0              1          -1 1.5' stroke='blue'/>
</svg>

svg


uri

data uri


rectangle


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


uri

data uri


ellipse


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


uri

data uri


sample


code

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 5 5' height='10rem'>
    <path id='p' d='M2.5 1a1.5 1.5 0 0 1 0 3a1.5 1.5 0 0 1 0 -3Z' fill='#00ff00ff' stroke='#0000ffff'/>
    <symbol id='t' viewBox='0 0 5 5'><text font-size='1' font-family='monospace'><textPath xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#p'>01234567<tspan fill='#ffff00ff'>8</tspan>9ABCDEFG</textPath></text></symbol>
    <use fill='#00ffffff' xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#t'/>
    <use fill='#ff00ffff' dominant-baseline='text-before-edge' xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#t'/>
</svg>

svg

0123456789ABCDEFG

uri

data uri(# -> %23)