SVG elements and attributes: a plain reference
A list of the SVG elements that matter, grouped by what they do, and the attributes they take: geometry, paint, references, and which ones CSS can set.
Published
An SVG is built from elements (tags such as <rect> and <path>) and each element is shaped and coloured by its attributes (such as width and fill). The standard defines several dozen elements, but most files use fewer than ten: <svg>, <g>, <path>, the basic shapes, and now and then <text>, <defs> and a gradient. This page lists the elements by what they do, then the attributes by kind.
One complete file with six different elements:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 60">
<title>A sign</title>
<g fill="none" stroke="navy" stroke-width="3">
<rect x="5" y="5" width="110" height="50" rx="8"/>
<path d="M20 40 L40 20 L60 40"/>
</g>
<circle cx="90" cy="30" r="10" fill="gold"/>
</svg><svg> is the frame, <title> names the picture, <g> groups a <rect> and a <path> so they share one outline style, and <circle> is filled on its own.
Elements that draw
| Element | Draws | Its own attributes |
|---|---|---|
<rect> | Rectangle, with square or rounded corners | x, y, width, height, rx, ry |
<circle> | Circle | cx, cy, r |
<ellipse> | Ellipse | cx, cy, rx, ry |
<line> | One straight line | x1, y1, x2, y2 |
<polyline> | Joined straight lines, left open | points |
<polygon> | Joined straight lines, closed | points |
<path> | Any outline: lines, curves and arcs | d |
<text>, <tspan>, <textPath> | Words, a run inside them, and words along a path | x, y, dx, dy |
<image> | A picture file, such as a PNG or another SVG | href, x, y, width, height |
SVG shapes and SVG path cover the first seven in full.
Elements that organise
| Element | Purpose |
|---|---|
<svg> | The outer frame, or a nested one. See the svg tag |
<g> | A group: its styles and transform apply to everything inside |
<defs> | Holds things that are defined now and used later. Not drawn |
<symbol> | A reusable drawing with its own viewBox. Drawn only through <use> |
<use> | Draws a copy of another element, named by href |
<a> | A link around shapes or text |
<switch> | Draws the first child whose conditions are met, such as a language |
<foreignObject> | A box holding HTML inside the drawing. Read by browsers, rarely by other software |
SVG g, defs, symbol and use explains grouping and reuse.
Elements that paint and cut
These draw nothing by themselves. Another element points to them with url(#id).
| Element | Used through | Does |
|---|---|---|
<linearGradient>, <radialGradient>, with <stop> | fill or stroke | A blend of colours |
<pattern> | fill or stroke | A repeating tile |
<clipPath> | clip-path | Hides what falls outside a shape |
<mask> | mask | Hides or fades by the brightness of a drawing |
<marker> | marker-start, marker-mid, marker-end | Arrowheads and dots on lines |
<filter>, with its fe... children | filter | Blur, shadow, colour changes and other effects |
A filter is assembled from primitive elements whose names begin with fe: <feGaussianBlur>, <feDropShadow>, <feOffset>, <feColorMatrix>, <feBlend>, <feComposite>, <feFlood>, <feMerge>, <feTurbulence>, <feDisplacementMap>, <feMorphology> and a few more.
Elements that describe, style and animate
| Element | Purpose |
|---|---|
<title> | A short name for the drawing or for one shape. Browsers show it as a tooltip, and screen readers can read it |
<desc> | A longer description. Not shown |
<metadata> | Data about the file, such as its licence. Not shown |
<style> | CSS for the elements in the file |
<script> | JavaScript. Runs when the SVG is opened as a document or sits inline in a page, never in an <img> or a CSS background |
<animate>, <animateTransform>, <animateMotion>, <set> | Animation written in the file itself |
<view> | A named viewBox that a link can select |
Older references also list <font>, <glyph>, <tref>, <altGlyph> and <cursor>. These were removed from the current standard and should not be used in new files.
Attributes every element takes
| Attribute | Purpose |
|---|---|
id | A unique name, used by url(#id), href="#id", CSS and scripts |
class | A shared name for CSS |
style | CSS written on the element itself |
transform | Move, turn, scale or skew |
Presentation attributes
These set how a shape is painted. Most are inherited: set on a <g> or on the <svg>, they apply to everything inside that does not set its own.
| Attribute | Sets | Default |
|---|---|---|
fill | The inside colour | black |
stroke | The outline colour | none |
stroke-width | The outline thickness | 1 |
stroke-linecap, stroke-linejoin | The shape of line ends and corners | butt, miter |
stroke-dasharray, stroke-dashoffset | Dashes | none, 0 |
opacity, fill-opacity, stroke-opacity | Transparency | 1 |
fill-rule | How overlapping parts of one path make holes | nonzero |
font-family, font-size, font-weight | The lettering of <text> | Depends on the program |
visibility, display | Whether the element is shown | Shown |
SVG fill and stroke covers the paint attributes one by one.
Attributes and CSS
Every presentation attribute is also a CSS property, so fill="teal" can be written as style="fill: teal" or as a rule in a style sheet. When both are present, CSS wins: a presentation attribute is the weakest way to set a style, and any CSS rule that matches the element overrides it.
Geometry is mostly attribute only. points, viewBox, x1 and href can only be written in the markup, and d is best kept there too. Current browsers do accept a handful of geometry properties in CSS: x, y, width, height, cx, cy, r, rx and ry. Software other than browsers generally reads the attributes only, so keep geometry in attributes in any file meant for a cutting machine or a vector editor.
Names are case sensitive in a standalone .svg file: viewBox, linearGradient, clipPath, textPath and preserveAspectRatio all need their capitals.
Which elements cutting software understands
Shapes, paths and groups are safe everywhere. The rest varies from one program to the next. Cricut Design Space, by its own help pages, reports “unsupported items” for an SVG with editable text, clipping paths, linked or embedded pictures, or fills that are not one flat colour, which rules out <text>, <clipPath>, <image>, gradients and <pattern> for that program. A file made of <path> elements with flat fills, grouped with <g>, is the form that travels best.
Common problems
| What you see | Cause | Fix |
|---|---|---|
| An element draws nothing | It sits inside <defs>, or it is a <symbol>, gradient, clip path or mask | Draw it with <use>, or refer to it from a shape |
A fill attribute is ignored | A CSS rule or style attribute sets the fill too | Change it there |
| An element is ignored in a .svg file | Wrong capitals, as in lineargradient | Use the exact name |
url(#name) has no effect | No element has that id, or two elements share it | Make the id match and keep it unique |
| Another program drops part of the drawing | It does not support that element | Convert the part to plain paths in a vector editor |
Questions
How many SVG elements are there? Several dozen, and more than twenty of those are used only inside filters. An icon or a cut file uses only a handful of them.
What is the difference between an element and an attribute? An element is a tag, such as <circle>. An attribute is a setting written inside the tag, such as r="10".
How can the elements in a file be listed? Open it in the SVG viewer, which counts the paths, groups, shapes, text elements and images and shows the code.