Creating inline SVG images within your content.

Created by Peter Noble

using code to create svg images.

Creating images with code may sound difficult and using a drawing app to make svg images may be the easiest method to use. However for simple images a text editor maybe your friend.

W3C describes SVG or Scalable Vector Graphics on their web as

“… a Web graphics language. SVG defines markup and APIs for creating static or dynamic images, capable of interactivity and animation, including various graphical effects. It can be styled with CSS, and combined with HTML.” W3C

I love SVG!

A quick look at using SVG.

  • Start with svg tags and the view box.

<svg viewBox=”0 0 200 200”></svg>

The viewBox attribute specifyies a given set of graphics stretch to fit a particular container element.

  • Add the content of the graphic. For our example circles,

<circle cx=”100” cy=”100” r=”100” stroke=”red” stroke-width=”1” fill=”red” />

<circle cx=”100” cy=”100” r=”60” stroke=”red” stroke-width=”1” fill=”yellow” />

cx and cy are the starting points and r is the radius of the circle. fill defines the colour of the circle. Each item sits on top on the previous.

<text x=”60” y=”100” fill=”black”>I love SVG!</text>

And perhaps a little text to finnish our graphic. x and y are the starting point with fill being the colour of the text.

  • We can add CSS styling to the svg elelement to control its size, background colours and borders.

style=”width:150px;”

  • We can even use javascript to alter the stying of the elements within the svg.

<button onclick=”circle1.style.fill=’yellow’;”>Click to change to yellow</button>

and add an id attribute to the element to be changed.

<circle id=”cirle1” cx=”100” cy=”100” r=”60” stroke=”red” stroke-width=”1” fill=”yellow” />

I love SVG!

For more information and examples of using SVG, checkout the w3schools website . For detailed informaion the W3C website will fill in the spaces.