Atlassian uses cookies to improve your browsing experience, perform analytics and research, and conduct advertising. Accept all cookies to indicate that you agree to our use of cookies on your device. Atlassian cookies and tracking notice, (opens new window)
Confluence
/
SVG

SVG

Nov 20, 2017

Links

  • http://svgpocketguide.com/book/

Example

<!DOCTYPE html>
<html>
  <head>
    <style media="screen">
      body, html {
        height: 100%;
        background: #eee;
      }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      rect {
        fill: #cc0000;
        stroke: black;
        stroke-width: 2;
      }
    </style>
  </head>
  <body>
    <svg width="290" height="270">
      <rect x="10" y="10" width="30" height="250" />
      <rect x="50" y="110" width="30" height="150" />
      <rect x="90" y="60" width="30" height="200" />
      <rect x="130" y="140" width="30" height="120" />
      <rect x="170" y="30" width="30" height="230" />
      <rect x="210" y="80" width="30" height="180" />
      <rect x="250" y="50" width="30" height="210" />
    </svg>
  </body>
</html>


, multiple selections available,
For you

Web Development
  • Web Development
    Web Development
     This trigger is hidden
Results will update as you type.
  • A basic Barchart
  • Absolute Positioning
  • Code Editors
  • CSS
  • CSS Animations
  • CSV Transformation with node.js
  • d3.js
  • Desktop Source Compilers
  • Homebrew
  • Hosting Services
  • HTML CSS Javascript Resources
  • Interactive Visualization
  • jQuery
  • Mobile Optimization
  • node.js
  • Page-High Resizable Containers
  • Scrollable Visualization
  • Simple Layout Techniques
  • SVG
  • SVG Visualization
  • Terminal
  • UI Prototyping Tools
  • Version Control with GitHub

{"serverDuration": 12, "requestCorrelationId": "f429b2d53b404c508ca6781195f71212"}