Expand All  Collapse All

• Getting started
  • 1. The most basic svg
    <svg>
    some svg here.
    </svg>
    #Run it with Opera.
    the most common mistake is to forget to give the file a .svg extension.
    
  • 2. How to run it
    You run it somehow.
    
• Forms
  • Image
    <image xlink:href="somepicture.jpg" width="250" height="450" x="100" y="50"/>;
  • Rectangle
    <rect x="20" y="20" rx="20" ry="20" width="250" height="250" style="fill:red;stroke:none"/>
  • lines
    <path d="M 0 112 L 200 524 L 400 329 "/>
    <path d="M 0 312 C 40 360 120 80 360 306 Z"/> //Smooth
    
    //M = Establis point of origin.
    //L = Straight line from current point to point specified.
    //H = Horizontal line path from origin to point specified.
    //V = Vorizontal line path from origin to point specified.
    //Z = Straight line back to origin.
    //C = Curved.
    
  • Text
    • 1. Normal
      <text>
      <tspan x="330" dy="30"
      fill="red" font-family="Courier" font-size="16" font-weight="normal" font-style="italic">
      This is a single family</tspan>
      </text>
      
    • 2. Following a path
      <path id="duck" d="M 0 312 C 40 360 120 280 160 306 C 160 306 165 310 170 303 Z"/>
      <text style="font-size:10">
      <textPath xlink:href="#duck">We go up, then we go down, then up again </textPath>
      </text>
      
    • 3. Link
      <a xlink:href="http://www.w3.org">
      <rect width="200" height="40"/> <text x="100" y="30" style="text-anchor:middle">My button</text>
      </a>
      
  • Color
    <rect width="10" height="10" style="fill:coral" />
    <rect width="10" height="10" style="fill:rgb(255,127,80)" />
    
    
    
• Reuse
  //Changes the behavior of the elements:
  <style type="text/css"> <![CDATA[
  rect {stroke:black; fill:white}
  rect.different {stroke:red; stroke-width:4; fill:none}
  ]]></style>
  
  <rect x="20" y="20" width="100" height="100"/>
  <rect class="different" x="20" y="140" width="100" height="100"/>
  
• Behavior
  • Javascript
    <script language="JavaScript" type="text/javascript"> <![CDATA[
    
    function onmouseover(evt)
    {
    var elem = evt.target;
    var style = elem.getStyle();
    style.setProperty("fill-opacity", 0.5);
    elem.setAttribute ('x', 300); }
    function onmouseout(evt)
    {
    var elem = evt.target;
    var style = elem.getStyle();
    style.setProperty("fill-opacity", 1.0);
    }
    ]]></script>
    
    <rect x="20" y="20" width="250" height="250" style="fill:red; stroke:none" onmouseover="onmouseover(evt)" onmouseout="onmouseout(evt)"/>
    <rect x="210" y="210" width="250" height="250" style="fill:green; stroke:none" onmouseover="onmouseover(evt)" onmouseout="onmouseout(evt)" />
    
    
  • Events
    onmouseover="func(evt)"
    onmouseout="func(evt)"
    
  • Move
    <animateMotion type="rotate" from="0" to="360" dur="11s" repeatCount="indefinite"/>
    <animateTransform attributeName="transform" type="translate" from="0,0" to="900,200" dur="30s"/>
    <animate attributeName="cy" values="90;10" calcMode="spline" keySplines="1 0 0 1" dur="10s"/>
    <g transform="translate(100,0)"> //moves whatever is in g by the coordinates.
    
  • Change Attribute
    <animate attributeName="width" from="120" to="40" begin="0s" dur="8s" fill="freeze" />
    <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="4s" repeatCount="indefinite" end="15s" fill="freeze"/>
    <set attributeType="CSS" attributeName="fill" to="blue" begin="8s" />
    <animate attributeName="r" from="20" to="46" dur="13s" />
    <animateTransform attributeName="transform" type="translate" from="0,0" to="40,20" dur="3s">
    <animateTransform attributeName="transform" attributeType="XML" type="scale" from="0.4"
    to="3.3" begin="0s" dur="4s" fill="freeze" />
    <animateColor attributeType="CSS" attributeName="fill" from="aqua" to="crimson" begin="0s"
    dur="10s" fill="freeze"/>
    
    <animate attributeName="width" begin="0s" fill="freeze" values="120; 180; 190; 200" keyTimes="0; 2; 4; 8"/>
    
  • Rotate
    <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="30" dur="11s" repeatCount="indefinite"/>
    
  • Clone new objects
    <svg viewbox= "0 0 600 400">
    <script type="text/ecmascript"><![CDATA[
    
    function addrect(evt)
    {
    var svgobj=evt.target;
    var svgdoc = svgobj.getOwnerDocument();
    var newnode = svgobj.cloneNode(false);
    svgstyle = newnode.getStyle();
    var colors = new Array('red', 'blue', 'yellow', 'cyan', 'green', 'lime', 'magenta', 'brown', 'azure',
    'burlywood', 'blueviolet', 'crimson');
    var x = 10+480*Math.random();
    var y = 10+330*Math.random();
    var width = 10+100*Math.random();
    var height = 10+50*Math.random();
    var fill = Math.floor(colors.length*Math.random());
    if (fill == colors.length) fill = colors.length-1;
    fill = colors[fill];
    svgstyle.setProperty ('opacity', 0.3+0.7*Math.random());
    svgstyle.setProperty ('fill', fill);
    newnode.setAttribute ('x', x);
    newnode.setAttribute ('y', y);
    newnode.setAttribute ('width', width);
    newnode.setAttribute ('height', height);
    var contents = svgdoc.getElementById ('contents');
    newnode = contents.appendChild (newnode);
    } ]]></script>
    
    
    <rect x="1" y="1" style="fill:#bbffbb" width="598" height="398"/>
    <g id="contents">
    <rect onclick="addrect(evt)" style="fill:blue;opacity:1" x="250" y="100" width="20" height="20"/>
    </g>
    </svg>