SVG

From NoskeWiki
Jump to navigation Jump to search

About

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">
<head>
  <title>SVG Example</title>
</head>
<body>


<svg
  id="id-circle-1"
  width="200"
  height="100">
  
  // Add a circle in the middle:
  <circle
    stroke="rgba(255.0,0,0,0.3)"
    stroke-width="15"
    fill="transparent"
    r="40"    // We set radius slightly less than height/2.
    cx="50%" cy="50%">
  </circle>
  
  // Make a rectangle and move it to the middle and rotate it:
  <rect
    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)">
  </rect>
  
  // Let's center text in the middle:
  <text
    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"/>
</svg>


</body>
</html>


Related Pages


Links