The SVG tag in HTML: attributes and examples
The svg tag is the outer element of every SVG drawing. What its attributes do, from viewBox to xmlns, its default size in HTML, and nesting.
Published
The <svg> tag is the container for an SVG drawing: everything between <svg> and </svg> is drawn inside the rectangle it sets up. Its attributes fix the size of that rectangle (width, height) and the coordinates used inside it (viewBox). The same element is the root of a standalone .svg file and the tag typed into an HTML page. The one difference is that a file needs an xmlns attribute and a tag in HTML does not.
For pasting into an HTML page:
<svg width="120" height="120" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="teal"/>
</svg>As a file of its own, saved as circle.svg:
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="teal"/>
</svg>Both draw the same thing: a teal circle in a square of 120 pixels. The drawing is 100 units wide, so each unit is 1.2 pixels and the circle is 96 pixels across.
The attributes of the svg tag
| Attribute | What it does | If left out |
|---|---|---|
width, height | The size of the drawing’s frame. Plain numbers are pixels. Units such as mm, in and % are allowed | Explained under “Default size” below |
viewBox | Four numbers, min-x min-y width height: the part of the drawing shown in the frame, and so the scale | One unit is one pixel, and the drawing cannot scale |
preserveAspectRatio | How the viewBox is fitted when the frame has other proportions | xMidYMid meet: fit inside and centre |
xmlns | Names the SVG language. Always http://www.w3.org/2000/svg | Fine in HTML. A standalone file is not read as SVG |
x, y | Position, for an <svg> nested inside another | 0. Ignored on the outermost tag |
fill, stroke and other presentation attributes | Set a style that the shapes inside inherit | Shapes are filled black with no stroke |
class, id, style | Hooks for CSS and JavaScript, as on any HTML element | |
role, aria-label, aria-hidden | What assistive technology is told about the picture |
Each of the first three has a guide of its own: SVG size and units, SVG viewBox explained and preserveAspectRatio.
Two attributes seen in older files can be left alone or removed. version="1.1" and baseProfile were dropped from the current SVG specification and browsers take no notice of them. xmlns:xlink="http://www.w3.org/1999/xlink" is only needed when something in the file uses xlink:href.
Default size
What the tag does with no width or height depends on what else it has.
| The tag has | Size on an HTML page |
|---|---|
width and height | That size |
viewBox only | The full width of its container, with the height worked out from the viewBox’s proportions |
| Nothing | 300 by 150 pixels |
CSS overrides the attributes. svg { width: 2em; height: 2em; } in a style sheet sets the size of an inline SVG whatever its width and height attributes say.
How the tag behaves in an HTML page
It sits in the line of text. An inline <svg> is laid out like an image or a word, resting on the text baseline. That leaves a few pixels of space under it, the room kept for the tails of letters such as g and y. display: block or vertical-align: middle in CSS removes the gap.
It clips. Anything drawn outside the frame is hidden. overflow: visible in CSS shows it.
Styles are inherited. fill="currentColor" on the tag makes every shape that sets no fill of its own take the colour of the surrounding text. This is the usual way to make an icon follow its link or button.
Page CSS and JavaScript reach inside. The shapes are part of the page, so they can be styled and scripted. That is not true of an SVG file shown with <img> or as a CSS background: nothing on the page reaches into those. SVG in HTML compares the ways of placing an SVG.
It must be closed. Write </svg> after the contents. An empty one can be written <svg/>, which SVG allows even inside HTML.
What goes inside
| Kind | Elements |
|---|---|
| Shapes | <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon>, <path> |
| Text and pictures | <text>, <image> |
| Structure | <g>, <defs>, <symbol>, <use>, another <svg> |
| Paint and effects | <linearGradient>, <radialGradient>, <pattern>, <clipPath>, <mask>, <filter> |
| Description and style | <title>, <desc>, <style> |
Later elements are painted over earlier ones: the order in the code is the stacking order. There is no z-index for shapes.
An svg inside an svg
A nested <svg> makes a new frame with its own coordinates inside the outer drawing. This example is for pasting into HTML:
<svg width="200" height="100" viewBox="0 0 200 100">
<rect width="200" height="100" fill="gold"/>
<svg x="120" y="10" width="60" height="60" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10" fill="teal"/>
</svg>
</svg>The inner tag claims a square of 60 units whose corner is at 120,10 in the outer drawing, and fits its own 24-unit drawing into it. Each inner unit is 2.5 outer units, so the circle is 50 units across. On the nested tag x and y work, and its contents are clipped to its frame. A <g> does neither: it only groups, as SVG g, defs, symbol and use explains.
The xmlns attribute
xmlns="http://www.w3.org/2000/svg" is not a link that is fetched. It is a fixed name that tells an XML reader the tags belong to SVG. A standalone file needs it: without it, a browser opening the file shows the code as a tree or a blank page, and other programs may not open it. Inside an HTML page the browser already knows that <svg> starts an SVG drawing, so the attribute is optional there.
Common problems
| What you see | Cause | Fix |
|---|---|---|
| The drawing is 300 by 150 | No width, height or viewBox | Add a viewBox, then a size |
| It will not resize with CSS, or is cropped | No viewBox | Add viewBox="0 0 W H" using the original width and height |
| A small gap under the image | The tag sits on the text baseline | display: block on the <svg> |
| The .svg file shows as code or not at all | xmlns is missing | Add it to the opening tag |
An <svg> made in JavaScript draws nothing | It was made with document.createElement('svg') | Use document.createElementNS('http://www.w3.org/2000/svg', 'svg'), and the same for every shape |
viewbox is ignored in a file or in script | The capital B is missing | Write viewBox |
| CSS on the page does not style the shapes | The SVG is in an <img> or a background | Put the SVG inline, or style it inside the file |
x and y do nothing | They only apply to a nested <svg> | Position the outer tag with CSS |
Questions
Is svg an HTML tag? It is an SVG element that HTML allows in a page. HTML5 made it possible to type <svg> straight into an ordinary HTML page, with no namespace.
Does the svg tag need a closing tag? Yes: </svg>, or the self-closing form when it is empty.
Can a page have more than one? As many as needed. They share the page’s ids, so give each gradient, clip path and symbol an id that is not repeated.
How can the attributes of a file be checked? Open it in the SVG viewer, which shows the size, the viewBox and what the file contains. If the code has no xmlns, the viewer adds it before drawing and says so in a warning.