(click anywhere to close)
OPEN MENU

[SVG] Displaying SVGs

category: Website | course: SVG | difficulty:

What’s great about SVGs, is that they use tags for everything, exactly like HTML does. In fact, everything this course is going to discuss is simply an HTML tag with special, graphical function(s). There are only a few tags available in SVG, but each of them also accepts a multitude of attributes – such as, for example, x-position, y-position and colour – that allow you to create nearly anything you want. And that’s exactly the way this course will be set up: each chapter introduces new tags with their own special attributes until we’ve discussed everything there is to know.

The idea of using tags comes from a more general language called XML: Extensible Markup Language, which is the foundation for most web-based markup languages. If you want to know more about tags, you could take a look at that.

The svg Element

Because of this tags structure, we need an element to tell the browser an SVG element is coming. For this, we use the <svg> element, with the following standard syntax:

<svg xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink”> … svg objects … </svg>

The two attributes in the starting tag are to tell the browser to parse whatever’s inside as an SVG object, and not as regular XML. It’s not always strictly necessary, but I recommend just including these attributes by default.

Displaying

The three ways to display an SVG are: inline, image and background-image.

Inline

You can, whenever you want, just include the <svg> element inside your HTML document. It’s an element, just like paragraphs or headings in HTML, and will be interpreted correctly. This way, the SVG is hardcoded into the HTML file, and will display like it was an image file. By default, it scales to the full width and height of its parent container.

The inline method has the advantage of allowing us access to the SVG with JavaScript, which we can use to make the graphic dynamic. It has the disadvantage that you can’t reuse the code somewhere else without having to copy-paste it.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<rect x="0" y="0" width="40" height="40" fill="green" />
</svg>

Image

Alternatively, you can save your <svg> markup within a text file, with extension .svg.

Then, the regular <img /> tag can display this SVG file for you, which is nothing different from displaying any other image file. To remind you, the syntax is:

<img src=”yourFile.svg” />

The advantage here is that we can reuse the same graphic throughout the whole project, but the disadvantage is that it’s loaded as an image file, which means we can’t access its individual tags.

<img src="icons/SVG.svg" />

Background-Image

Similar to the previous method, you can use the background-image CSS property on an element to set the vector graphic as the background. To remind you, the syntax is:

background-image:url(yourFile.svg)

<div style="background-image:url(icons/SVG.svg)"></div>

When you save your vector graphics inside a .svg file, you still need to put it inside an <svg> tag, because it needs to be interpreted as such. We’ll also soon see that his tag has some very important attributes you’ll often need.

Content Type

If you ever plan on serving SVG content from a different file than .svg, you need to set the Content-Type HTTP Header of the response to image/svg+xml.

What is this and why would I do that? Well, it could happen that you have a PHP file reading data from a server, and generating a graphic based on that, which you need to display. The problem is that the browser doesn’t interpret it correctly, because it comes from the wrong file type. This is fixed by telling the browser the type of content inside the file. Don’t worry about it for now.

Quick (Important) Note

In case you hadn’t figured it out yet: because SVG are tags, you can also use CSS to style them. You, however, can’t use the normal HTML tags within an SVG graphic – the <svg> tag allows only its own special tags. It’s also the other way around, as all the tags you’ll learn here can not be used outside of an <svg> element.

CONTINUE WITH THIS COURSE
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)