From NoskeWiki
Jump to navigation Jump to search


Scalable Vector Graphics (SVG) is an Extensible Markup Language (XML)-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999, and supported by all modern browsers.

It's commonly used to render logos or dynamic graphs as it can interplay nicely with JavaScript.

Child Pages

Related/Child Pages:

Simple Inline Example

To declare SVG inside your HTML:

Simple example with a circle, rect, text and paths
<!doctype html>
<html lang="en">
  <title>SVG Example</title>

  // Add a circle in the middle:
    r="40"    // We set radius slightly less than height/2.
    cx="50%" cy="50%">
  // Make a rectangle and move it to the middle and rotate it:
    width="60" height="10"
    x="0" y="0"
    rx="3" ry="3"  // Rounded edges. 
    // Translate it to the middle of the circle
    // then rotate about the middle:
    transform="translate(70, 45) rotate(45, 30, 5)"
    style="fill:rgba(255,0,0,0.3); stroke-width:1; stroke:rgba(255,0,0,1.0)">
  // Let's center text in the middle:
    x="50%" y="50%"
    dominant-baseline="middle" text-anchor="middle"
    font-size="30px" fill="#333333"
    class="circle-percent-text"  // You can also use CSS (or a mix).
    >SVG Rocks!</text>
  // Now create a poly line with the M (move to) command.
  // Note that lower case is for relative (l = line),
  // and uppercase would be for an absolute position.
  <path id="lineAB" d="M 0 80 l 30 15 30 -15" stroke="red"
  stroke-width="5" fill="none" />
  // Now create a curved Bézier path:
  // M (start_x start_y) q (rel_curve_target_x rel_curve_target_y rel_end_x rel_end_y).
  <path d="M 140 80 q 15 20 30 0 q 15 -20 30 0" stroke="blue" stroke-width="5" fill="#0000ff33"/>


Related Pages