Scalable Vector Graphics (SVG) 2

https://www.w3.org/TR/SVG2/
Admin
Scalable Vector Graphics (SVG) 2 is an XML-based language for describing two-dimensional vector and...
Tokens:297,792
Snippets:1,827
Trust Score:10
Update:4 hours ago
Show doc for...
Tokens:
Raw
### Example toap01 - simple text on a path

Source: https://www.w3.org/TR/SVG2/text.html

A complete SVG example showing a path drawn in red and blue text placed along it using a textPath with href. Includes a viewport outline.

```XML
<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path id="MyPath"
          d="M 100 200 
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
  </defs>
  <desc>Example toap01 - simple text on a path</desc>

  <use href="#MyPath" fill="none" stroke="red"  />
  <text font-family="Verdana" font-size="42.5" fill="blue" >
    <textPath href="#MyPath">
      We go up, then we go down, then up again
    </textPath>
  </text>

  <!-- Show outline of viewport using 'rect' element -->
  <rect x="1" y="1" width="998" height="298"
        fill="none" stroke="blue" stroke-width="2" />
</svg>
```

--------------------------------

### Example InitialCoords - SVG initial coordinate system

Source: https://www.w3.org/TR/SVG2/coords.html

SVG example showing the initial coordinate system with origin at top/left, x-axis right, y-axis down. It draws axes, red corner markers, and labels for (0,0), (300,0), and (0,100). The viewport is 300px by 100px.

```xml
<?xml version="1.0" standalone="no"?>
<svg width="300px" height="100px" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Example InitialCoords - SVG's initial coordinate system</desc>

  <g fill="none" stroke="black" stroke-width="3" >
    <line x1="0" y1="1.5" x2="300" y2="1.5" />
    <line x1="1.5" y1="0" x2="1.5" y2="100" />
  </g>
  <g fill="red" stroke="none" >
    <rect x="0" y="0" width="3" height="3" />
    <rect x="297" y="0" width="3" height="3" />
    <rect x="0" y="97" width="3" height="3" />
  </g>
  <g font-size="14" font-family="Verdana" >
    <text x="10" y="20">(0,0)</text>
    <text x="240" y="20">(300,0)</text>
    <text x="10" y="90">(0,100)</text>
  </g>
</svg>
```

--------------------------------

### Example circle01: Circle filled with red and stroked with blue

Source: https://www.w3.org/TR/SVG2/shapes.html

SVG example demonstrating a 'circle' element with center (600,200) and radius 100, filled red and stroked blue. Includes a 'rect' element to outline the viewport.

```XML
<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example circle01 - circle filled with red and stroked with blue</desc>

  <!-- Show outline of viewport using 'rect' element -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2"/>

  <circle cx="600" cy="200" r="100"
        fill="red" stroke="blue" stroke-width="10"  />
</svg>
```

--------------------------------

### Example line01 - SVG lines with varying stroke widths

Source: https://www.w3.org/TR/SVG2/shapes.html

SVG example showing five lines in user coordinates with stroke widths from 5 to 25. The viewBox is '0 0 1200 400' and the lines are drawn in green on a blue viewport outline.

```XML
<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example line01 - lines expressed in user coordinates</desc>

  <!-- Show outline of viewport using 'rect' element -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2" />

  <g stroke="green" >
    <line x1="100" y1="300" x2="300" y2="100"
            stroke-width="5"  />
    <line x1="300" y1="300" x2="500" y2="100"
            stroke-width="10"  />
    <line x1="500" y1="300" x2="700" y2="100"
            stroke-width="15"  />
    <line x1="700" y1="300" x2="900" y2="100"
            stroke-width="20"  />
    <line x1="900" y1="300" x2="1100" y2="100"
            stroke-width="25"  />
  </g>
</svg>
```

--------------------------------

### Example polyline01 - increasingly larger bars

Source: https://www.w3.org/TR/SVG2/shapes.html

SVG example showing a polyline with increasing bar heights. The polyline uses the 'points' attribute with coordinates in the user coordinate system established by the 'viewBox' attribute. The example includes a 'rect' element to outline the viewport.

```xml
<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example polyline01 - increasingly larger bars</desc>

  <!-- Show outline of viewport using 'rect' element -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2" />

  <polyline fill="none" stroke="blue" stroke-width="10" 
            points="50,375
                    150,375 150,325 250,325 250,375
                    350,375 350,250 450,250 450,375
                    550,375 550,175 650,175 650,375
                    750,375 750,100 850,100 850,375
                    950,375 950,25 1050,25 1050,375
                    1150,375" />
</svg>
```

--------------------------------

### Example quad01 - quadratic Bézier commands in path data

Source: https://www.w3.org/TR/SVG2/paths.html

SVG example showing a path with a Q command and a T command, along with annotations for control points and end points. The control point for the T command is automatically computed as the reflection of the previous Q command's control point.

```XML
<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="6cm" viewBox="0 0 1200 600"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title>Example quad01 - quadratic Bézier commands in path data</title>
  <desc>Picture showing a "Q" a "T" command,
        along with annotations showing the control points
        and end points</desc>
  <rect x="1" y="1" width="1198" height="598"
        fill="none" stroke="blue" stroke-width="1" />

  <path d="M200,300 Q400,50 600,300 T1000,300"
        fill="none" stroke="red" stroke-width="5"  />
  <!-- End points -->
  <g fill="black" >
    <circle cx="200" cy="300" r="10"/>
    <circle cx="600" cy="300" r="10"/>
    <circle cx="1000" cy="300" r="10"/>
  </g>
  <!-- Control points and lines from end points to control points -->
  <g fill="#888888" >
    <circle cx="400" cy="50" r="10"/>
    <circle cx="800" cy="550" r="10"/>
  </g>
  <path d="M200,300 L400,50 L600,300 
           L800,550 L1000,300"
        fill="none" stroke="#888888" stroke-width="2" />
</svg>
```

--------------------------------

### Example cubic01: SVG with C and S commands

Source: https://www.w3.org/TR/SVG2/paths.html

SVG example showing a path using a 'C' command followed by an 'S' command, with annotations for control points and end points. Uses an internal CSS style sheet. The control point for the 'S' command is automatically computed as the reflection of the previous 'C' command's control point.

```xml
<?xml version="1.0" standalone="no"?>
<svg width="5cm" height="4cm" viewBox="0 0 500 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title>Example cubic01- cubic Bézier commands in path data</title>
  <desc>Picture showing a simple example of path data
        using both a "C" and an "S" command,
        along with annotations showing the control points
        and end points</desc>
  <style type="text/css"><![CDATA[
    .Border { fill:none; stroke:blue; stroke-width:1 }
    .Connect { fill:none; stroke:#888888; stroke-width:2 }
    .SamplePath { fill:none; stroke:red; stroke-width:5 }
    .EndPoint { fill:none; stroke:#888888; stroke-width:2 }
    .CtlPoint { fill:#888888; stroke:none }
    .AutoCtlPoint { fill:none; stroke:blue; stroke-width:4 }
    .Label { font-size:22; font-family:Verdana }
  ]]></style>

  <rect class="Border" x="1" y="1" width="498" height="398" />

  <polyline class="Connect" points="100,200 100,100" />
  <polyline class="Connect" points="250,100 250,200" />
  <polyline class="Connect" points="250,200 250,300" />
  <polyline class="Connect" points="400,300 400,200" />
  <path class="SamplePath" d="M100,200 C100,100 250,100 250,200
                                       S400,300 400,200" />
  <circle class="EndPoint" cx="100" cy="200" r="10" />
  <circle class="EndPoint" cx="250" cy="200" r="10" />
  <circle class="EndPoint" cx="400" cy="200" r="10" />
  <circle class="CtlPoint" cx="100" cy="100" r="10" />
  <circle class="CtlPoint" cx="250" cy="100" r="10" />
  <circle class="CtlPoint" cx="400" cy="300" r="10" />
  <circle class="AutoCtlPoint" cx="250" cy="300" r="9" />
  <text class="Label" x="25" y="70">M100,200 C100,100 250,100 250,200</text>
  <text class="Label" x="325" y="350"
        style="text-anchor:middle">S400,300 400,200</text>
</svg>
```

--------------------------------

### SVG text elements with style attribute

Source: https://www.w3.org/TR/SVG2/styling.html

Example of using the 'style' attribute to style 'text' elements similarly to the previous example, with inline CSS declarations for fill colors.

```XML
<text style="fill: green;" lang="en">Variable declared twice</text>
<text style="fill: yellow;" lang="en">Undeclared variable</text>
<text style="fill: red;" lang="en">Bad syntax for variable name</text>
```

--------------------------------

### Example tspan05: propagation of rotate values to nested tspan elements

Source: https://www.w3.org/TR/SVG2/text.html

SVG example demonstrating how rotate values propagate from a parent text element to nested tspan elements. The text element has rotate="5,15,25,35,45,55", and child tspans override or inherit values. The example includes detailed notes on how values are applied to characters and spaces.

```XML
<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100%" viewBox="0 0 500 120"
  xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>
    Example tspan05 - propagation of rotation values to nested tspan elements.
  </desc>
  <text id="parent" font-family="Arial, sans-serif" font-size="32" fill="red" x="40" y="40"
    rotate="5,15,25,35,45,55">
    Not

    <tspan id="child1" rotate="-10,-20,-30,-40" fill="orange">
      all characters

      <tspan id="child2" rotate="70,60,50,40,30,20,10" fill="yellow">
        in
        
        <tspan id="child3">
          the
        </tspan>
      </tspan>

      <tspan id="child4" fill="orange" x="40" y="90">
        text
      </tspan>

      have a
    </tspan>

    <tspan id="child5" rotate="-10" fill="blue">
      specified
    </tspan>

    rotation
  </text>

  <!-- Show outline of viewport using 'rect' element -->
  <rect x="1" y="1" width="498" height="118" fill="none"
        stroke="blue" stroke-width="2" />
</svg>
```

--------------------------------

### Example arcs01 - arc commands in path data

Source: https://www.w3.org/TR/SVG2/paths.html

Complete SVG document demonstrating simple uses of arc commands within a path, including a pie chart with two wedges and a line with arc blips. The example uses absolute and relative arc commands with various radii, rotations, and flags.

```XML
<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="5.25cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title>Example arcs01 - arc commands in path data</title>
  <desc>Picture of a pie chart with two pie wedges and
        a picture of a line with arc blips</desc>
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="1" />

  <path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
        fill="red" stroke="blue" stroke-width="5" />
  <path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
        fill="yellow" stroke="blue" stroke-width="5" />

  <path d="M600,350 l 50,-25 
           a25,25 -30 0,1 50,-25 l 50,-25 
           a25,50 -30 0,1 50,-25 l 50,-25 
           a25,75 -30 0,1 50,-25 l 50,-25 
           a25,100 -30 0,1 50,-25 l 50,-25"
        fill="none" stroke="red" stroke-width="5"  />
</svg>
```

--------------------------------

### SVG event attribute example with onclick

Source: https://www.w3.org/TR/SVG2/interact.html

Example of an SVG event attribute (onclick) that passes the Event object evt to a function MyClickHandler. The event attribute content is interpreted as ECMAScript.

```SVG
<rect onclick="MyClickHandler(evt)" .../>
```

--------------------------------

### SVG marker example with arrowhead

Source: https://www.w3.org/TR/SVG2/painting.html

Illustrative example of a marker element used as an arrowhead at the end of a path. The marker uses markerUnits='strokeWidth', viewBox, and orient='auto'. The rendering effect is visually identical to the following (not shown).

```XML
<?xml version="1.0" standalone="no"?>
<svg width="4in" height="2in"
     viewBox="0 0 4000 2000"
     xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="Triangle"
      viewBox="0 0 10 10" refX="0" refY="5"
      markerUnits="strokeWidth"
      markerWidth="4" markerHeight="3"
      orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
  <rect x="10" y="10" width="3980" height="1980"
       fill="none" stroke="blue" stroke-width="10" />
  <desc>Placing an arrowhead at the end of a path.
  </desc>
  <path d="M 1000 750 L 2000 750 L 2500 1250"
        fill="none" stroke="black" stroke-width="100"
        marker-end="url(#Triangle)"  />
</svg>
```

--------------------------------

### Compact path data without spaces

Source: https://www.w3.org/TR/SVG2/paths.html

The same path data as the previous example but expressed more compactly by removing spaces.

```SVG
M100 100L200 200
```

--------------------------------

### Example rect01: Rectangle with Sharp Corners

Source: https://www.w3.org/TR/SVG2/shapes.html

SVG example showing a rectangle with sharp corners (rx and ry default to 0). The rect is filled with yellow and stroked with navy. Includes a viewport outline in blue.

```XML
<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example rect01 - rectangle with sharp corners</desc>

  <!-- Show outline of viewport using 'rect' element -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2"/>

  <rect x="400" y="100" width="400" height="200"
        fill="yellow" stroke="navy" stroke-width="10"  />
</svg>
```

--------------------------------

### ECMAScript addEventListener example

Source: https://www.w3.org/TR/SVG2/interact.html

Shows how to define a function and register it as an event listener using addEventListener in ECMAScript. The function receives an Event object as a parameter.

```ECMAScript
function myAction1(evt) {
  // process the event
}
// ... later ...
myElement.addEventListener("click", myAction1, false)
```

--------------------------------

### switch element with systemLanguage and catch-all

Source: https://www.w3.org/TR/SVG2/struct.html

Example of using the switch element to render the first matching child based on the user's language preference. A final child without systemLanguage acts as a catch-all, ensuring content is always displayed.

```SVG
<switch>
  <text systemLanguage="fr" x="10" y="30">Bonjour</text>
  <text systemLanguage="ja" x="10" y="30">こんにちは</text>
  <text x="10" y="30">Hello</text>
</switch>
```

--------------------------------

### Example ViewBox: SVG with viewBox and preserveAspectRatio

Source: https://www.w3.org/TR/SVG2/coords.html

This example shows an outermost svg element with width and height of 300px and 200px, and a viewBox of '0 0 1500 1000' with preserveAspectRatio='none'. The viewBox causes the graphic to scale to fit the SVG viewport.

```SVG
<?xml version="1.0" standalone="no"?>
<svg width="300px" height="200px"
     viewBox="0 0 1500 1000" preserveAspectRatio="none"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Example ViewBox - uses the viewBox
   attribute to automatically create an initial user coordinate
   system which causes the graphic to scale to fit into the
   SVG viewport no matter what size the SVG viewport is.</desc>
  <!-- This rectangle goes from (0,0) to (1500,1000) in user coordinate system.
       Because of the viewBox attribute above,
       the rectangle will end up filling the entire area
       reserved for the SVG content. -->
  <rect x="0" y="0" width="1500" height="1000"
        fill="yellow" stroke="blue" stroke-width="12"  />
  <!-- A large, red triangle -->
  <path fill="red"  d="M 750,100 L 250,900 L 1250,900 z"/>
  <!-- A text string that spans most of the SVG viewport -->
  <text x="100" y="600" font-size="200" font-family="Verdana" >
    Stretch to fit
  </text>
</svg>
```
Tokens:
Raw