Learn Basic SVG Examples II introduces more basic Scalable Vector Graphic concepts.
The first example draws a trapezium using the svg ‘path‘ element.

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

To understand the above example first look at the ‘viewport’ settings inside the opening svg tag ‘(<svg width=”250″ height=”250″><). A value of ‘250’ pixels is set for both the width and height of the svg elements viewport. Next inside the ‘svg’ tags is a ‘path’ element set with a ‘move to (M)’ attribute and a ‘line (L)’ attribute. A ‘close path (z)’ attribute is also present. Without the ‘close path (z)’ attribute the svg does not draw a line from the last point to the first point.

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


Both examples have a ‘fill’ attribute that has a ‘red’ color value, a ‘stroke’ attribute that has a ‘black’ color value and a ‘stroke-width’ value that is set to a measurement of ‘5’ pixels in width.

This next example uses the ‘sRGB‘ color space.

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

This example uses the ‘hexadecimal color codes’.

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

In this example each circles color is the same but set using a different color syntax.

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


SVG color values can be either a ‘svg named color‘, a three digit (#fff) or six digit #hex number (#d32016), rgb integer values ‘rgb(211,32,32)’, or rgb percent values ‘rgb(82.7%, 12.5%,8.6%)’.

Here are three squares with a ‘fill’ value set using the named color syntax.

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

In this next example the ‘rect’ elements are set using a color name and the ‘circle’ elements are set using ‘RGB integer color values’.

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

SVG colours are used with the ‘fill and stroke‘ attributes. Here are three squares overlapping each other. The stroke color is set however the fill color is set to a value of ‘none’.

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

If the fill attribute is omitted the svg defaults to a fill value of black.

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


And finally here is an example using css to style svg text.

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


Learn Basic SVG Examples II


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 *