Scalable Vector infoGraphics

about Scalable Vector Graphics and Interactivity applied to InfoGraphics

SVG basic shapes

leave a comment »

// Lines

<line x1=”start-x” y1=”start-y” x2=”end-x” y2=”end-y” style=”stroke-width: 10; stroke: black; stroke-opacity: 0.4; stroke-dasharray: 2,3″ />

// Rectangles

<rect x=”left-x” y=”top-y” width=”width” height=”height” rx=”round corner x” ry=”round corner y” style=”fill: #FFFCCC; stroke: red; stroke-width: 7; stroke-opacity: 0.5; fill-opacity: 0.4;” />

// Circles and Ellipses

<circle cx=”center-x” cy=”center-y” r=”radius” style=” … ” />

<ellipse cx=”30″ cy=”30″ rx=”20″ ry=”10″ style=” … ” />

// Polygons

<polygon points=”points-specifications” style=” … ” />

// polygon with intersecting lines

<polygon points=”15,10 55, 10 45, 20 5, 20″ style=” fill-rule: none (evenodd) ” />

// Polyline element

<polyline> element has the same attributes as a <polygon>, except that the shape is not closed.

<polyline points=”5 20, 20 2, 25 10, 35 30, 45 10, 55 30, 65 10, 75 30, 80 20, 95 20″ style=”stroke: black; stroke-width: 3; fill: none” />

NOTE: You can specify the values as numbers (without specifying units) and they will use x,y coordinates, or you can specify units, like the next example:

<line x1=”1cm” y1=”30″ width=”50″ height=”10pt” />


Written by mcameira

September 26, 2010 at 1:26 pm

Posted in Code

Tagged with , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: