JSFiddle

  • SVG.js is fast. #3 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <div id="drawing"></div>
  • Cluttered syntax #4 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    // Vanilla js
    var div = document.getElementById('drawing') 
    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
    svg.setAttributeNS ...
  • TextPath

    No-Library (pure JS), HTML, CSS, JavaScript

    var draw = SVG('drawing').height('300')
    
    var text = draw.text(function(add) {
      add.tspan('We go ')
      add.tspan('up').fill ...
  • TBox

    No-Library (pure JS), HTML, CSS, JavaScript

    var draw = SVG('drawing').size(300,300)
    
    // draw transformed rect
    var rect = draw.rect(175,175).move(75,75).rotate ...
  • RBox

    No-Library (pure JS), HTML, CSS, JavaScript

    var draw = SVG('drawing').size(300,300)
    
    // draw transformed rect
    var rect = draw.rect(175,175).move(75,75).rotate ...
  • BBox

    No-Library (pure JS), HTML, CSS, JavaScript

    var draw = SVG('drawing').size(300,300)
    
    // draw transformed rect
    var rect = draw.rect(175,175).move(75,75).rotate ...
  • SVG.Tooltip

    No-Library (pure JS), HTML, CSS, JavaScript

    // Plugin example
    SVG.Tooltip = SVG.invent({
    	create: 'title'
     
    , inherit: SVG.Element
    
    , extend: {
    		// Set text content
        text: function(text) {
          if (text ...
  • Style element

    No-Library (pure JS), HTML, CSS, JavaScript

    var draw = SVG('drawing')
    
    draw.element('style').words('rect { fill: #f06; }')
    
    draw.rect(100,100)
  • svg.js preserve whitespace #2 is the latest revision

    svg.js 0.x (latest), HTML, CSS, JavaScript

    var draw = SVG('drawing')
    
    var text = draw.text(' with     a lot of    white t e    s p a c e ...
  • Rotating and moving text #5 is the latest revision

    svg.js 0.x (latest), HTML, CSS, JavaScript

    
    var draw = SVG('canvas')
    
    var group = draw.group().move(100, 100)
    
    var text = group.text('that').font({ size: 103 }).fill ...