SVG Reference
Index to Code
viewBox
<svg viewBox="0 0 960 240" style="width: 960; fill: none; stroke: #ff9d80; stroke-width: 2;">
Fixed Width
<svg width="480" height="240">    Used for patterns and markers
Line
<path d="M0,0 h200,0 v0,200 h-200,0 Z" />
Polyline
<polyline points="60,110 65,120 70,115 75,130 80,125 85,140" />
Arc 
<path d="a100,100 0 0 1 0,100"/>     1 = clockwise     0 = counter-clockwise
Circle 
<circle cx="240" cy="240" r="100"/>
Patterns
Define and Draw a Pattern
Path Strokes
Color, Width, Linetype, LineJoin, Dasharray, & Opacity
Path Markers
<marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5" stroke-width="0" fill="#00ffff" orient="auto"> </marker>
<use>
<defs> <path id="name" d=". . ." /> </defs>    <use xlink:href="#name" x="10" y="10"/>
Transform
<g transform="translate(240,240) rotate(45 240 240) scale(-1,1)"> </g>
Draw Screws
Code to draw a slotted screw
<text>
<text x="10" y="40" style="font: bold 30px arial; fill: #ff9d80; stroke: none;">Text here</text>
textPath
Text on a Path
Gradients
Linear & Radial Gradient Fills
:hover
pseudo classes
Animations
animation coding
Examples
SVG shape example codes
Bézier Curve
<path d="q150,-300 300,0" />
Acronyms
Coding Acronyms
Path Commands
◤ X→ and Y↓ coordinate origin is upper left corner of the SVG box
  • x, y   Coordinates
  • cx, cy   Center Coordinates
  • rx, ry   Radius Values
  • Default corners are sharp
  • Fills do not require closed paths
  • Adjust coordinates to allow for stroke width
CAPITAL LETTERS = position: Absolute
lower case letters = position: relative
Arcs
<path d="M100,0 A 100 100 0 0 1 0,100" />   a rx ry x-axis-rotation large-arc-flag sweep-flag x y

path d="M50,100 A 50 50 0 0 1 150,100"
path d="M50,100 A 60 50 0 0 1 150,100"
path d="M100,0 A 100 100 0 0 1 0,100"
path d="M0,100 A 100 100 0 0 1 100,0"
ARCs
  • First Move to the start of the ARC (not necessary if continuing on)
  • Define the x-radius and the y-radius
  • Define the sweep-flag parameter: 1=clockwise, 0=counter-clockwise
  • Define the Endpoint of the ARC
    • Single Rounded Corner
    Use an ARC to make a proper radius, like this.

    <path d="M0,10 h80 a40,40 0 0 1 40,40 v20" />
    Positioning
    SVG boxes move in-line just like text. <br> and <p> Tags and CSS styles function normally.
    SVG backgrounds are black by default. Using "fill: none;" makes the background transparent.


    This box has been moved

    viewBox
    The viewBox is the drawing canvas. It can be re-sized with a style="width: ;" statement

    <svg viewBox="0 0 960 100" style="width: 960; fill: none; stroke: #ff9675; stroke-width: 4;">
    viewBox="min-x, min-y, width, height" style="width: 960" controls the scale

    X→ and Y↓ coordinate origin is upper left corner of the SVG viewBox
    Since SVG is scalable the coordinate suffix px is not used.

    The viewBox can have a background color or gradient.   style="background-color: #303030;"

    <svg> viewBox="0 0 100 100" style="width; 100;"> ⇒ 100%
    <svg> viewBox="0 0 100 100" style="width; 50;"> ⇒ 50%

    Groups
    <g> GROUPS the SVG elements, and sets definitions for the group as in <div>

    <g fill="white" stroke="green" stroke-width="5">
        <circle cx="40" cy="40" r="25" />
        <circle cx="60" cy="60" r="25" />
    </g>

    Patterns
    Since Patterns are defined inside a Fiixed-Width viewBox,
    Absolute x,y coordinates are preferred.
    <pattern> must be used inside the <defs> tags

    <defs>
    <pattern id="hatch" viewBox="0,0,10,10" width="5%" height="20%">
      <path d="M0,0 L10,10 M0,-10 L-10,10" stroke="#0088ff" stroke-width="1" />
    <pattern id="cirhatch" viewBox="0,0,10,10" width="5%" height="20%">
      <circle cx="5" cy="5" r="3" stroke="#0088ff" stroke-width="1" />
    </pattern>
    </defs>

    <rect width="400" height="100" stroke="red" stroke-width="2" fill="url(#hatch)" />
    <path d="M0,100 h400 v100 h-400 Z" stroke="red" stroke-width="2" fill="url(#cirhatch)" />
    </svg>

    The width & height % in the pattern definition is based on the width & height dimensions of the element filled.

    #hatch #cirhatch #custom #hopi #artdeco

    Stroke <Path> Options
    COLOR
    style="stroke: #ff9d80;"
    WIDTH
    style="stroke-width: 20;"
    LINECAP (default is 'butt')
    style="stroke-linecap: butt;"
    style="stroke-linecap: square;"
    style="stroke-linecap: round;"
    LINEJOIN (default is 'miter')
    style="stroke-linejoin: miter;"
    style="stroke-linejoin: bevel;"
    style="stroke-linejoin: round;"
    DASHARRAY
    <path stroke-dasharray="20,10,5,10"   d="M5 60 l480 0" />
    stroke-dasharray="solid,space,solid,space..."
    OPACITY (default opacity is 1.0)
    style="fill-opacity: 0.3;"     style="stroke-opacity: 0.5;"

    Markers for Paths
    Define the <marker> in <defs>.
    ALL <marker> paths must be defined in ABSOLUTE COORDINATES
    NO COMMAS or PERIODS
    <marker viewBox>
    10 x 10
    refX , refY     = insertion pt
    MARKER ARROW CODE:
    <defs>
    <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5"
    markerWidth="5" markerHeight="5"
    stroke-width="0" fill="#00ffff"
    orient="auto">
    <path d="M 0 0 L 10 5 L 0 10 Z" />
    </marker>
    </defs>
    MARKER TARGET CODE:
    <defs>
    <marker id="target" viewBox="0 0 10 10" refX="5" refY="5"
    markerWidth="5" markerHeight="5"
    stroke-width="0" fill="#00ffff"
    <circle cx="5" cy="5" r="4" fill="#ffffff" />
    <circle cx="5" cy="5" r="3" fill="#ff0000" />
    <circle cx="5" cy="5" r="2" fill="#ffffff" />
    <circle cx="5" cy="5" r="1" fill="#ff0000" />
    </marker>
    </defs>
    MARKER STAR CODE:
    <defs>
    <marker id="star" viewBox="0 0 12 12" refX="6" refY="6"
    markerWidth="6" markerHeight="6"
    stroke-width="0" fill="#00ff00"
    orient="auto">
    <path d="M 7 0 L 7 12 L 0 2 L 12 6 L 0 10 L 7 0" /> </marker>
    </defs>
    TO ADD MARKERS TO ANY PATH:
    <path d="M10,10 l80,80 "
    marker-start="url(#arrowrev)"
    marker-mid="url(#dot)"
    marker-end="url(#arrow)" />
    TO REVERSE MARKER DIRECTION AT THE START OF A PATH:
    orient="auto-start-reverse"
    MIDPOINT MARKERS ARE ADDED AT ALL VERTICES:
    marker-mid="url(#dot)"
    The 'use' Statement
    The <use> statement duplicates any piece of defined <svg> code.
    Define the code to be duplicated inside a     <defs> and give it an id="name"

    <defs>
    <path id="a_window" d="M0,0 h12 v16 h-12 Z " style="fill: red; stroke: cyan; stroke-width: 2;" />
    </defs>

    Then USE it anywhere inside <svg> this way:
    <use xlink:href="#a_window" x="0" y="10" />
    <use xlink:href="#a_window" x="30" y="10" />
    <use xlink:href="#a_window" x="60" y="10" />

    Transforms
    Apply Transforms to a Group <g>

    The default Transform Origin is 0,0

    Best is to define the group centered on 0,0

    Translate <g transform="translate(30,0)">   translate(x,y)

    Rotate <g transform="rotate(30 50 50)"   rotate(degrees, center x, center y)
    Rotate <g transform="rotate(30)"   rotate(degrees)

    Scale <g transform="scale(-1,1)"   scale(horizontal, vertical)
    Hello World Hello World Hello World

    Draw a Screw

    Coding...

    <svg>
    <defs>
    <path id="screw" d="M0,0 m-10,0 a10,10 0 0 1 20,0  a10,10 0 0 1 -20,0   m3,7   l14,-14 " />
    </defs>

    <use xlink:href="#screw" x="50" y="30" />
    </svg>

    Text Commands
    fill controls the color
    stroke controls the outline
    <text x="10" y="40" style="font: bold 30px times; fill: #ffffff; stroke: none;">
    Chrysler Building</text>
    Chrysler Building Chrysler Building Chrysler Building Chrysler Building
    ROTATE TEXT
    Positive Rotation is clockwise from the horizontal
    Negative Rotation is counter-clockwise from the horizontal
    TEXT-ANCHOR     DOMINANT-BASELINE
    VERTICAL
    By default, text is Vertically anchored at the bottom (baseline).
    To center Vertically use dominant-baseline="middle"

    HORIZONTAL
    By default, text is anchored at the left.
    To center Horizontally use text-anchor: "middle"


    <text dominant-baseline="middle" transform="translate(20,220) rotate(-90)"
     style="fill: #00ffff; stroke-width: 0;">
    —Chrysler Building</text>
    —Chrysler Building (-90°) —Chrysler Building (-60°) —Chrysler Building (-45°) —Chrysler Building (-30°)
    Text on a Path
    Define the path from LEFT ⮕ RIGHT or going CLOCKWISE

    Best Practice for ALL SVG Identifiers is to use  camelCase 
    Examples are:
    firstName   iPhone   visaCard   eMail   myPath

     DO NOT use numbers in the I.D. 

    Text on a Path Example
    THE PROCESS...

    1. Define the <path> within the <defs>, it must have a unique I.D. (id="myPath").
      During development, it is best to give the path a color too, (style="stroke: #ff0000;")

    2. In both <text> and <textpath> set these parameters as required (see sample code below)

    dx=" " distance from start of the path
    dy=" " baseline distance from the path, neg y = opposite side
    fill: #ff0000; this is the Text Color (can also be a gradient: fill: url(#gradientName);
    letter-spacing: 1px; adjust if needed
    stroke-width: 0; Required
    font: 28px times;
    font-weight: bold; (optional)

    3. In <defs> remove the path stroke color to hide the path (optional) style="stroke: none;"

    Sample Code
    <svg viewBox="0 0 960 200" style="width: 960; fill: none; stroke: #ff0000;
   stroke-width: 2; border: 1px solid #00ccff;">
<defs>
   <path id="myPath" d="M180,120  a240,240 0 0 1 300,0   a240,240 0 0 0 300,0 " />
</defs>

<use xlink:href="#myPath" x="0" y="0" />

<text dx="20" dy="-6">
   <textPath xlink:href="#myPath" style="font: 55px arial; letter-spacing: 1px;
   stroke-width: 0; fill: #ffffff;">Text on a Path Example
   </textPath>
</text>
</svg>
    Gradient Fills
    Define a gradient fill inside <defs> and give it a unique camelCase name
    (id="radialName")

    <defs>
    <linearGradient id="sunSet" x1="0%" y1="0%" x2="90%" y2="90%">
    <stop stop-color="red" offset="0%"/>
    <stop stop-color="gold" offset="100%"/>
    </linearGradient>

    <radialGradient id="moonSet" x1="0%" y1="0%" x2="90%" y2="90%">
    <stop offset="0%" stop-color="purple" />
    <stop offset="100%" stop-color="white" />
    </radialGradient>

    <circle id="sun" r="50" fill="url(#sunSet)" />
    <circle id="moon" r="50" fill="url(#moonSet)" />
    </defs>

    <use xlink:href="#sun" x="60" y="60" />
    <use xlink:href="#moon" x="180" y="60" />

    :hover Pseudo Class

    <style>
    .delta { fill: green; }
    .delta:hover { fill: red; }
    </style>
    ← Hover over the rectangle
    Animations
    SVG elements can be made to follow a path. The path can be defined in <defs> and then referenced
    OR
    the path can be included in the actual <svg>

    <svg>
    <circle r="5" fill="red" >
    <animateMotion dur="10s" repeatCount="indefinite" path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
    </circle>
    </svg>

    Examples:
    1. The motion path is drawn for reference and given an id="path1"
    2. Hide any motion path with stroke="none"
    3. The arrow to be moved is drawn, its origin (which follows the path) is 8px below its arrowhead base
    4. The arrow's <path> and <animateMotion> are NOT closed by a slash /
    5. <animateMotion> defines these animation parameters...
      • dur="1.5s" animation lasts 1.5 seconds
      • begin="" begins immediately when page is loaded (default)
      • begin="click" begins when clicked
      • begin="2s" begins 2 seconds after loading
      • begin="click + 1.5s" begins 1.5 seconds after being clicked
      • rotate="auto" x-axis follows the path, normal to the path
      • rotate="auto-reverse" x-axis follows the path rotated +180°, normal to the path
      • rotate="" undefined follows the path with zero rotation
      • fill="freeze" animation is 'frozen' at last position * This is NOT the drawing fill=""
      • fill="remove" animation is 'removed' at last position (default) * This is NOT the drawing fill=""
      • repeatCount="indefinite" animation is replayed forever (never uses the fill="")
      • repeatCount="2" animation is played 2 times
      • repeatDur="3.5s" animation is stopped after 3.5 seconds
    6. <mpath> references the motion path that was drawn

    <svg>
    <path id="path1" d="M50,125 C 50,25 200,25 200,125" fill="none" stroke="#606060" stroke-width="4" />
    <path d="M-10,-8 L10,-8 L 0,-40 z M0,-8 l0,60" fill="#00ff88" stroke="#ff9675" stroke-width="4" >
    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
    <mpath xlink:href="path1"/>
    </animateMotion>
    </path>
    </svg>

    rotate="auto"       rotate="auto-reverse"             rotate=""

    SVG Examples
    X→

    Y↓

    <circle cx="50" cy="50" r="40" stroke="cyan"
    stroke-width="3" fill="red" />
    ☉
    <ellipse cx="100" cy="50" rx="90" ry="40" stroke="cyan"
    stroke-width="3" fill="red"/>
    <polygon points="100,10 40,198 190,78 10,78 160,198"
    stroke="cyan" stroke-width="3" fill="red" />
    <polygon points="62,2 182,2 242,106 182,210 62,210 2,106 62,2"
    stroke="cyan" stroke-width="3" fill="red" />

    Art Deco Fan Element

    Box 240 x 240

    <path d="M 120,240 Q 120,136 208,42" stroke="#ffa080" stroke-width="4" fill="none" />

    <path d="M 2,120 A 1 1 0 0 1 238,120"
    stroke="#ffa080" stroke-width="4" fill="none" />

    Box 190 x 160
    Sine Curve Approximation (2 Bézier Curves)

    <path d="M10,80 Q50,0 90,80 130,180 170,80" stroke="#ffa080" stroke-width="3" fill="none" />

    Bézier Curve Reference
    A B C
    <path d="M100,350 q150,-300 300,0" stroke="blue" stroke-width="5" fill="none" />
    Website Coding Terminology

    File Transfer Protocal
    Hyper Text Transfer Protocal Secure
    Hyper Text Markup Language
    Secure Hypertext Markup Language
    Cascading Style Sheet
    Scalable Vector Graphics
    DIVision (of a webpage)
    Inline CSS coding
    A referenced CSS code defined by ".classname { }"
    JavaScript
    Open Graph (images originally for use in social media links)