Step 10: Vector Graphics

<svg>-element: Scalable Vector Graphics

New to HTML5 is the <svg>-element. This cool element allows you to create scalable vector graphics. So what are they? Well, an image like a .jpg file is always based on a bitmap. When you scale this to a larger size, you will lose quality. It will start to show all these horrible looking blocks or it will just become a blur. A vector graphic is based on a grid. It doesn’t matter how small or big you scale it. Every bit of the graphic will be recalculated accordingly and therefor it will keep it’s quality no matter what. This is the reason why these graphics are so popular in the world of professional print. The down side is, that you can only use this for text, illustrations, graphs or shapes.

HTML5 brings this technique to web sites. This is great, because you, as the future webdesigner you are becoming after this HTML5 course, should love everything fluid and scalable. After all, who knows who could be viewing your work and on which type of device. Regardless the visitor’s device of choice, you want the quality of your (client’s) graphics to remain as high as possible!

The <svg>-element allows you to draw lines/paths, circles, squares/boxes, text and graphics. The browser will consider this to be an object. This means the browser will remember this graphic. If you adjust attributes, it will re-render the graphic. Also, the <svg>-element is XML based, which means you can combine it with Javascript. In short, it’s pretty cool!

I’m going to introduce you to the basics of this and then we’ll be bold and completely abuse this element to create a background for our sample page.

Draw a circle

In order to create a circle you’ll need the following code:

<svg width=”100″ height=”100″>
<circle cx=”50″ cy=”50″ r=”40″ stroke=”red” stroke-width=”2″ fill=”orange” />
</svg>

With the width- and height-attribute you define the size of the object. In this case, you also set the circle’s default diameter to 100 pixels.
The nested <circle>-element tells the browser that it should be drawing a circle. With the next two attributes you determine the position of the circle on the screen. The middle of the circle has the 0,0 coordinate. The cx-attribute is the circle’s x-coordinate. It lets you define how far to the left the graphic should show. The cy-attribute is the circle’s y-coordinate. It lets you define how far from the top the graphic should show. The r-attribute stands for radius. This allows you to influence the size of the circle. In this case, the value 40 stands for the radius from the circle’s heart to it’s outline.
The next three attributes define the look of the circle. The stroke-attribute is used to set the color of the outline and stroke-width sets it’s thickness in pixels. If you don’t want an outline to show, you can just remove this or set it to 0 (zero). The fill-attribute defines with which color the circle should be filled.
Feel free to play around with the values to see what happens.

Draw a box

To draw a box you need this code:

<svg width=”300″ height=”100″>
<rect width=”300″ height=”100″ style=”fill:rgb(255,255,0);stroke-width:1;stroke:rgb(0,0,0)” />
</svg>

Again, with the width- and height-attributes you set the size of the object. Next, you set which shape you want to draw. In this case it’s a rectangle (rect) with the size you’ve indicated in the width- and height-attribute. Using CSS style you set the way the rectangle is supposed to look. It’s supposed to be filled with the RGB color yellow (which is the 255,255,0 code you see), it’s supposed to get an outline of a 1 pixel width and coloured black (which is rgb(0,0,0)).

If you want to take it a step further, you could choose to round the corners like this:

<svg width=”300″ height=”100″>
<rect x=”20″ y=”20″ rx=”20″ ry=”20″  width=”300″ height=”100″ style=”fill:rgb(255,255,0);stroke-width:1;stroke:rgb(0,0,0)” />
</svg>

In the x- and y-attribute you set the coordinates of the rectangle itself. You determine where on the site the graphic should show. The rx- and ry-attributes set the amount of round the corners should get. You can play around with the values to see how that works.

Let’s play

There’s so much you can do with this <svg>-element. You can create logos, gradients, stars and so much more. If you want to know more, please check out drawing with the <svg>-element at the W3School. They have a short tutorial to help you discover what’s possible.

OK, let’s adjust our sample file. We’re going to be real cheeky and use this as a cheat to create a background for our page. This is not what it intended for and it’s going to look awful, but who cares, it’s fun!

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Whatever title of your file</title>
</head>

<body>

<svg width=”100″ height=”100″>
  <circle cx=”50″ cy=”50″ r=”400″
  stroke=”pink” stroke-width=”2″ fill=”purple” />
Sorry, your browser does not support inline SVG.
</svg>

<svg width=”100″ height=”100″>
  <circle cx=”1200″ cy=”500″ r=”400″
  stroke=”purple” stroke-width=”2″ fill=”pink” />
Sorry, your browser does not support inline SVG.
</svg>

<p><img src=”images/nora_logo.jpg” alt=”nora’s artist logo” height=”42″ width=”50″ /></p>

<p>
Nora Tol loves pop music and loves to write. At the early age of 9 those two loves got combined when she wrote her first lyrics. She never stopped writing song words since and also started producing music in her teens.
</p>

<div>
More recently Nora’s been releasing various songs and music videos for you to enjoy online. You can listen to a mix of her songs right here:<br />

<audio controls>
<source src=”Nora-Tol-mix.mp3” type=”audio/mpeg”>
Your browser does not support the audio tag.
</audio>

or watch her video

<video width=”320″ height=”240″ controls>
<source src=”music-video.mp4” type=”video/mp4″>
Your browser does not support the video tag.
</video>

</div>

<p>
Nora’s songs include (in the order of release):
<ol reversed>
<li><a href=”http://youtu.be/LBt58qpwSu8” title=”Burner“>Burner</a></li>
<li><a href=”file.mp3” download=”file.mp3″>Catch Me</a></li>
<li><a href=”picture.jpg” media=”print and (resolution:150dpi)” type=”img/jpg”>They’re Waiting 4 My Beat 2 Drop</a>
<ul>
<li><a href=”newsitem.html” hreflang=”eng”>Originally released as “Beat 2 Drop” in 2010</a>, on the Darlin Nikki movie soundtrack</li>
<li>Re-released in 2013</li>
</ul>
</li>
<li><a href=”http://www.noratol.com/run-girl”  target=”_top”>Run Girl</a></li>
</ol>
</p>

<p>All songs are written by <a href=”http://www.noratol.com” rel=”author”>Nora Tol</a></p>

</body>
</html>

Check it out in the browser to see the result.

Go to the next step.

 

Bookmark the permalink.

Comments are closed