Foreword

This are my personal notes on the svg specs, and are heavily based in the best resource: Mozilla Development Network

and others:

NOTES SVG: Scalable Vector Graphics

An example of svg definition- the center of coordinates is top-left.

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="ligthblue" />
  <circle cx="150" cy="100" r="80" fill="yellow" stroke="orange" />
  <text x="150" y="120" font-size="40" text-anchor="middle" fill="blue">SVG</text>
</svg>

The tag <svg> is the root tag, and the definition of an SVG element

the version="1.1" defines the version of the SVG standard

the width="300" height="200"defines the size of the SVG drawing.

Then follows the actual drawing (remember that the center of coordenates is at the top-left)

The background is set with: <rect width="100%" height="100%" fill="ligthblue" />

We draw a circle with: <circle cx="150" cy="100" r="80" fill="yellow" />

We write a text with: <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

first_example_svg

From this example we can draw some conclusions:

  1. the figures are rendered as they are defined. First at the bottom, and the last at the top of the image.
  2. fill fills the interior of its graphical element
  3. stroke paints the aoutline of its graphical element.
  4. Colors have short-names according to CSS3; as example:
    • black
    • silver
    • gray
    • white
    • maroon
    • red
    • fuchsia
    • green
    • lime
    • olive
    • navy
    • blue
    • lightblue
    • teal
    • aqua

and many more.

For a exact definition of a color is used:

RGB, RGBa

em { color: rgb(255,0,0) }      /* integer range 0 - 255 */
em { color: rgba(255,0,0,1)     /* the same, with explicit opacity of 1 */
em { color: rgb(100%,0%,0%) }   /* float range 0.0% - 100.0% */
em { color: rgba(100%,0%,0%,1) } /* the same, with explicit opacity of 1 */
p { color: rgba(0,0,255,0.5) }        /* semi-transparent solid blue */
p { color: rgba(100%, 50%, 0%, 0.1) } /* very transparent solid orange */

HSL, HSLa

* { color: hsl(0, 100%, 50%) }   /* red */
* { color: hsl(120, 100%, 50%) } /* lime */ 
* { color: hsl(120, 100%, 25%) } /* dark green */ 
* { color: hsl(120, 100%, 75%) } /* light green */ 
* { color: hsl(120, 75%, 75%) }  /* pastel green, and so on */
em { color: hsl(120, 100%, 50%) }     /* green */
em { color: hsla(120, 100%, 50%, 1) } /* the same, with explicit opacity of 1 */
p { color: hsla(240, 100%, 50%, 0.5) } /* semi-transparent solid blue */
p { color: hsla(30, 100%, 50%, 0.1) }  /* very transparent solid orange */
  1. Is required to include the following three attributes on the root tag in your SVG documents:
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events">

reference

BASIC SHAPES

Different tags, define diferent shapes and take different atributes. Remember that the center of coordenates is top-left, and increases from left to right and from top to bottom.

Line

<line x1="10" x2="50" y1="110" y2="150"/>
Line  
x1 The x position of point 1.
y1 The y position of point 1.
x2 The x position of point 2.
y2 The y position of point 2.

Polyline

Polylines are groups of connected straight lines. Since that list can get quite long, all the points are included in one attribute:

<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>

points - A list of points, each number separated by a space, comma, EOL, or a line feed character. Each point must contain two numbers, an x coordinate and a y coordinate. So the list (0,0), (1,1) and (2,2) could be written: “0 0, 1 1, 2 2”.

Rectangles:

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" r1="10" ry="30" fill="lightblue" />
</svg>
Rectangle  
x The x position of the top left corner of the rectangle.
y The y position of the top left corner of the rectangle.
width The width of the rectangle.
height The height of the rectangle.
rx The x radius of the corners of the rectangle.
ry The y radius of the corners of the rectangle.
fill The filling of the rectangle.

svg rectangle example

ref: (https://www.w3.org/TR/SVG/shapes.html#RectElement)

Circle:

<circle cx="25" cy="75" r="20" />
Circle  
r The radius of the circle.
cx The x position of the center of the circle.
cy The y position of the center of the circle.

Ellipse

<ellipse cx="75" cy="75" rx="20" ry="5"/>
Ellipse  
rx The x radius of the ellipse.
ry The y radius of the ellipse.
cx The x position of the center of the ellipse.
cy The y position of the center of the ellipse.

Polygon

<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>

points A list of points, each number separated by a space, comma, EOL, or a line feed character. Each point must contain two numbers, an x coordinate and a y coordinate. So the list (0,0), (1,1) and (2,2) could be written: “0 0, 1 1, 2 2”. The drawing then closes the path, so a final straight line would be drawn from (2,2) to (0,0).

Paths

Paths, are the most flexible components of svg, with them you can draw lines, arcs, curves … Paths, are defined by commands or directives (d). For example M 10 10, means go to point (10,10). The commands can be issued in two forms: · Uppercase letters: they use absolute coordinates. The origin of the coordenate systems is the top-left point. · Lowercase letters: they use relative coordinates from the last point

Line commands

There are five commands, that move in lines:

An example of path:

· In absolute coordenates:

<path d="M10 10 H 90 V 90 H 10 Z"/>

· In relative coordinates:

<path d="M10 10 h 80 v 80 h -80 Z"

Example:

<svg version="1.1"
     baseProfile="full"
     width="100" height="100"
     xmlns="http://www.w3.org/2000/svg">
 <rect width="100%" height="100%" stroke="yellow" fill="transparent" />
  <path d="M 0 50 h 10 l 7.5 15 l 15 -30 l 15 30 l 15 -30 l 15 30 
	l 7.5 -15 h15" stroke="black" fill="transparent" />
</svg>

Another Example - npn transistor

<svg version="1.1"
     baseProfile="full"
     width="80" height="100"
     xmlns="http://www.w3.org/2000/svg">
 <rect width="100%" height="100%" stroke="yellow" fill="lightblue" />
 <circle cx="40" cy="50" r="35" stroke="black" fill="transparent" />
 <path d="M 0 50 h 30 m 0 -20 v 40 m 0 -5 l 20 20 l -10 -15 l
	-5 5 l 15 10 v 15 M 30 35 l 20 -20  v -20" stroke="black" fill="transparent" />
</svg>

And other example - pnp transistor

<svg version="1.1"
     baseProfile="full"
     width="80" height="100"
     xmlns="http://www.w3.org/2000/svg">
 <rect width="100%" height="100%" stroke="yellow" fill="lightblue" />
<circle cx="40" cy="50" r="35" stroke="black" fill="transparent"
	stroke-width="2.5%" stroke-dasharray="4"  />
 <path d="M 0 50 h 30 m 0 -20 v 40 m 0 -5 l 20 20v 15 M 30 35 l 10
	-15 l 5 5 l -15 10 l 20 -20  v -20" 
       stroke="black" fill="transparent" stroke-width="2.5%" />
</svg>

Other: mosfet

<svg version="1.1"
     baseProfile="full"
     width="80" height="100"
     xmlns="http://www.w3.org/2000/svg">
 <rect width="100%" height="100%" stroke="yellow" fill="lightblue" />
 <path d="M 0 75 h 30 M 30 30  v 50 M 35 25 v 15 v -7.5 h 35 V 0   M 35 47.5 v 15 v -7.5 h 35 V100
   M 35 77.5  h 35  M 35 70 v 15    M 35 54.5 l 15 5  l 0 -10 l -15 5" 
   stroke="black"  fill="transparent"  stroke-width="2.5%" />
</svg>

Other example: mosfet pnp

<svg version="1.1"
     baseProfile="full"
     width="80" height="100"
     xmlns="http://www.w3.org/2000/svg">
 <rect width="100%" height="100%" stroke="yellow" fill="lightblue" />
 <path d="M 0 75 h 30 M 30 30  v 50 M 35 25 v 15 v -7.5 h 35   M 35 47.5 v 15 v -7.5 h 35  l -15 5   l 0 -10  l 15 5  V 0
   M 35 77.5  h 35   V 100 M 35 70 v 15   M 35 54.5 " 
   stroke="black"  fill="transparent"  stroke-width="2.5%" />
</svg>

Curve commands

Cubic Benzier Curve

C x1 y1 x2 y2 x y

x1 y1
first control point </br> x2 y2
second control point </br> x y
end point of the curve </br>

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
</svg>

Also you can use the S command to concatenate benzier curves- but the S command must always follow another C or S command. It just means that the last control point of the previous curve, will be the first control point of the following curve.

S x2 y2 x y

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
</svg>
Cuadratic Benzier Curve

Q x1 y1 x y

x1 y1
Control point that determines the slope of the curve at the starting and ending point. </br> x y
End point of the curve. 

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
</svg>

You can also concatenate cuadratic benzier curves, with the T command.

T x y

x y
Takes the slope of the previous curve, and (x, y) is the end point.

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
</svg>
Arcs

Arcs are sections of ellipses or circles. For a given x-radius and y-radius, there are two ellipses that connects any given two points, for each ellipse there are two paths for connect those two points. So there are four possibilities.

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

<svg width="325" height="325" xmlns="http://www.w3.org/2000/svg">
  <path d="M80 80
           A 45 45, 0, 0, 0, 125 125
           L 125 80 Z" fill="green"/>
  <path d="M230 80
           A 45 45, 0, 1, 0, 275 125
           L 275 80 Z" fill="red"/>
  <path d="M80 230
           A 45 45, 0, 0, 1, 125 275
           L 125 230 Z" fill="purple"/>
  <path d="M230 230
           A 45 45, 0, 1, 1, 275 275
           L 275 230 Z" fill="blue"/>
</svg>

Grouping of elements

The ‘g’ element is a container element for grouping together related graphics elements.

A group of elements, as well as individual objects, can be given a name using the ‘id’ attribute. Named groups are needed for several purposes such as animation and re-usable objects.

An example:

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1" width="5cm" height="5cm">
  <desc>Two groups, each of two rectangles</desc>
  <g id="group1" fill="red">
    <rect x="1cm" y="1cm" width="1cm" height="1cm"/>
    <rect x="3cm" y="1cm" width="1cm" height="1cm"/>
  </g>
  <g id="group2" fill="blue">
    <rect x="1cm" y="3cm" width="1cm" height="1cm"/>
    <rect x="3cm" y="3cm" width="1cm" height="1cm"/>
  </g>

  <!-- Show outline of viewport using 'rect' element -->
  <rect x=".01cm" y=".01cm" width="4.98cm" height="4.98cm"
        fill="none" stroke="blue" stroke-width=".02cm"/>
</svg>

A ‘g’ element can contain other ‘g’ elements nested within it, to an arbitrary depth.

hr

JAVASCRIPT FOR CREATING SVGs:

With the DOM2, the following funtions are available:

CREATING SVGs

If you want to creatre a new element, you can always use: document.createElement function. SVG, uses namespaces, so you’ll have to use ‘document.createElementsNS’ function.

references: </br>

An example is the following code:

//Get svg element
var svg = document.getElementsByTagName('svg')[0]; 

//Create a path in SVG's namespace
var SvgElement = document.createElementNS("http://www.w3.org/2000/svg", 'path'); 

//Set path's data
SvgElement.setAttributeNS(null,"d","M 0 0 L 10 10"); 

//Set stroke width
SvgElement.style.strokeWidth = "5px"; 

//append to the svg.
svg.appendChild(SvgElement);

And this code will produce something like this:

<svg>
 <path d="M 0 0 L 10 10" style="stroke: #000; stroke-width: 5px;" />
</svg>

ADDING TEXTS

Adding text is tricky, because the text is an sub child node. So then you have to create it, and explicitly add it as a child of the text element:

var txtElem = document.createElementNS("http://www.w3.org/2000/svg", "text");
 
txtElem.setAttributeNS(null,"x",100);
txtElem.setAttributeNS(null,"y",100);
txtElem.setAttributeNS(null,"font-size",12);

var helloTxt = document.createTextNode("Hello World!");

txtElem.appendChild(helloTxt)
 
document.documentElement.appendChild(txtElem);

REMOVING NODES

You just have to use the function:removeChild() 

document.documentElement.removeChild(txtElem);

RETRIEVING ATRIBUTES

To retrieve the value of the ‘x’ attribute on an SVG ‘rect’ element you must write:

getAttributeNS(null, 'x');

EXAMPLE OF CREATING A SVG PROGRAMMATICALY

Authors should provide a ‘metadata’ child element to the outermost svg element within a stand-alone SVG document. The ‘metadata’ child element to an ‘svg’ element serves the purposes of identifying document-level metadata.

As an example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>SVG programming</title>
	<link rel="stylesheet" href="mystyles.css" type="text/css">
	<script type="text/javascript">
	function myFunction() 
	{
	var root = document.getElementById('element');
	console.log( "root: " + root);
	
	var elem = document.createElementNS('http://www.w3.org/2000/svg','svg'); 
	
	elem.setAttributeNS(null,'version','1.1');
	elem.setAttributeNS(null,'id','SVGsergio');	
	elem.setAttributeNS(null,"x",'50');
	elem.setAttributeNS(null,"y",'50');
	elem.setAttributeNS(null,"width",'50%');
	elem.setAttributeNS(null,"height",'50%');
	elem.setAttributeNS(null,'baseProfile','1.1');
	<!-- WRONG: - elem.setAttributeNS(null,'xlink:href','http://www.w3.org/2000/svg'); -->
	elem.setAttributeNS(null,'Metadata',
		'<rdf:RDF  xmlns:rdf = "http://www.w3.org/1999/02/22-rdf-syntax-ns#"  xmlns:rdfs = "http://www.w3.org/2000/01/rdf-schema#"xmlns:dc = "http://purl.org/dc/elements/1.1/" >  <rdf:Description dc:format="image/svg+xml" > creator> Sergio González Collado<\/dc:creator> <\/rdf:Description> <\/rdf:RDF>');
		
	root.appendChild(elem);
	
	console.log("svg created: " + document.getElementById('SVGsergio'));	
	}
	
	<!-- in the console you can check this, with -->
	<!-- 
	var x = document.getElementById('SVGsergio');
	console.log(x);
	-->
	</script>
	
  </head>
  <body>
		<h1>SVG creation test</h1>
		<div id='element'>
			<!-- the created svg, will be placed here -->
		</div>
		<button type="button" onclick="myFunction()">Try it</button>

  </body>
</html>

another example of svg creation with js

//from svg.js
var ns = 'http://www.w3.org/2000/svg'
var div = document.getElementById('drawing') 
var svg = document.createElementNS(ns, 'svg')
svg.setAttributeNS(null, 'width', '100%')
svg.setAttributeNS(null, 'height', '100%')
div.appendChild(svg)
var rect = document.createElementNS(ns, 'rect')
rect.setAttributeNS(null, 'width', 100)
rect.setAttributeNS(null, 'height', 100)
rect.setAttributeNS(null, 'fill', '#f06')
svg.appendChild(rect)

More on the ref: http://codinginparadise.org/projects/svgweb/docs/QuickStart.html

Also check: http://srufaculty.sru.edu/david.dailey/svg/createElementBrowser.html

also a js library: SVG.js

Most common svg attributes are:

version = “" Indicates the SVG language version to which this document fragment conforms. In SVG 1.0 [SVG10], this attribute was fixed to the value '1.0'. For SVG 1.1, the attribute should have the value '1.1'.

baseProfile = profile-name Describes the minimum SVG language profile that the author believes is necessary to correctly render the content. The attribute does not specify any processing restrictions; It can be considered metadata. For example, the value of the attribute could be used by an authoring tool to warn the user when they are modifying the document beyond the scope of the specified base profile. Each SVG profile should define the text that is appropriate for this attribute. If the attribute is not specified, the effect is as if a value of ‘none’ were specified.

x = “" (Has no meaning or effect on outermost svg elements.) The x-axis coordinate of one corner of the rectangular region into which an embedded ‘svg’ element is placed. If the attribute is not specified, the effect is as if a value of '0' were specified.

y = “" (Has no meaning or effect on outermost svg elements.) The y-axis coordinate of one corner of the rectangular region into which an embedded ‘svg’ element is placed. If the attribute is not specified, the effect is as if a value of '0' were specified.

width = “" For outermost svg elements, the intrinsic width of the SVG document fragment. For embedded ‘svg’ elements, the width of the rectangular region into which the ‘svg’ element is placed. A negative value is an error. A value of zero disables rendering of the element. If the attribute is not specified, the effect is as if a value of '100%' were specified.

height = “" For outermost svg elements, the intrinsic height of the SVG document fragment. For embedded ‘svg’ elements, the height of the rectangular region into which the ‘svg’ element is placed. A negative value is an error. A value of zero disables rendering of the element. If the attribute is not specified, the effect is as if a value of '100%' were specified.

preserveAspectRatio = “[defer] []"

contentScriptType = “content-type”

contentStyleType = “content-type”

zoomAndPan = “disable magnify”

TODO: </br>

https://www.w3.org/TR/SVG/struct.html «