Here are some more scalable vector graphic examples.
First of all some lines drawn with the ‘line’ element.

See the Pen scalableVectorGraphicLines by Daniel (@Parsons) on CodePen.

The same drawing is done with less code by using the ‘path’ element instead.

See the Pen scalableVectorGraphicPathLines by Daniel (@Parsons) on CodePen.

The svg ‘path’ element is very powerful and is used for drawing more complex graphics. The path commands are expressed with an upper case letter for absolute position and a lower case letter for relative position. Here is a basic triangle drawn with the path commands of ‘Move to (M)’, ‘Line (L)’, and ‘Close path (Z)’.

See the Pen svgPathTriangle by Daniel (@Parsons) on CodePen.

Play around with the coordinates to get an understanding of what each path command does.

This next example has the path commands listed vertically for easier reading.

See the Pen svgPathRedTriangleFillNone by Daniel (@Parsons) on CodePen.

The example above can be explained as follows:

  • M 10 25 – Put the pen down at 10 25
  • L 10 75 – Draw a line to the point 10 75, from the previous point 10 25
  • L 60 75 – Draw a line to the point 60 75, from the previous point 10 75
  • L 10 25 – Draw a line to the point 10 25, from the previous point 60 75

Here are two triangles side-by-side. The ‘move to (M)’ path command is used after the first triangle is drawn and then the second triangle is also drawn using the ‘line (L)’ path command.

See the Pen svgTriangleTwoRedMove by Daniel (@Parsons) on CodePen.

Another example of a triangle with a fill color value.

See the Pen svgTrianglePathFillStroke by Daniel (@Parsons) on CodePen.

The svg ‘text’ element can be used in the graphic. Here is a very simple example that surrounds the text with a ‘rect’ element.

See the Pen svgTextExample by Daniel (@Parsons) on CodePen.

Here the ‘tspan‘ element is used to produce lines of text inside a ‘rect’ element. This example uses some more css attributes to style the size of the text and the type of text.

See the Pen svgTextElementInsideRectElement by Daniel (@Parsons) on CodePen.

A rotate attribute can be used in a text element.

See the Pen svgRotateTextExample by Daniel (@Parsons) on CodePen.

And finally here is a simple example of styling svg text. A fill and stroke value has been applied to the text.

See the Pen svgTextFillStrokeStyles by Daniel (@Parsons) on CodePen.

And for an encore here is the same example with a stroke-width added to really set things off.

See the Pen svgTextStrokeWidth3px by Daniel (@Parsons) on CodePen.

Also notice on the top line inside the opening ‘svg’ tag is a ‘xmlns’ attribute with a ‘url’. This is required if the svg is loaded from an external file. When the svg is embedded in the html5 document a ‘xmlns’ attribute is not required.

More on SVG (Scalable Vector Graphics)

SVG logo.

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *