What are the basic SVG shape elements?

SVG has six basic shapes: rect, circle, ellipse, line, polyline, and polygon, plus the general-purpose path. Each takes geometric attributes — rect uses x, y, width, height; circle uses cx, cy, r; path uses the d attribute with a sequence of drawing commands. Everything else builds on these.

What is the difference between g and svg elements?

The svg element establishes a new viewport and coordinate system and can be nested or stand alone as the root. The g element is a grouping container that does not create a viewport; it just lets you apply a transform, style, or attribute to several children at once. Use svg for embedded canvases and g for logical grouping.

How do SVG filter primitives work?

A filter element contains a pipeline of primitives — feGaussianBlur, feOffset, feColorMatrix, feMerge, and others. Each primitive reads an input (SourceGraphic, SourceAlpha, or a named result), processes it, and produces an output that the next primitive can reference. The element you apply the filter to is rendered through that pipeline.

What are paint server elements?

Paint servers define fills and strokes you reference by URL instead of a solid color. linearGradient and radialGradient define color gradients via stop children; pattern tiles a graphic; these are placed in defs and referenced from fill or stroke using url(#id). They let many shapes share one paint definition.

Is this the complete SVG specification?

It covers the elements you meet in everyday SVG authoring across shapes, containers, paint servers, filters, text, and animation. SVG is large and some legacy or rarely-used elements are omitted. For exhaustive, normative detail consult the W3C SVG 2 specification and the MDN SVG element reference.

SVG Elements Reference

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

SVG is an XML vocabulary for two-dimensional graphics. Its elements fall into a handful of families — shapes, containers, paint servers, filters, text, and animation — and each renders or contributes to rendering in a specific way. This is a searchable offline reference.

How it works

Every element is tagged with the category it belongs to and a short description of what it does and the attributes you usually set:

Shapes (rect, circle, path) draw geometry; path is the most general, using the d attribute’s command sequence.
Containers (svg, g, defs, symbol) group and position other elements. Only svg and symbol create a new viewport.
Paint servers (linearGradient, radialGradient, pattern) define fills and strokes referenced via url(#id).
Filters (filter, feGaussianBlur, feMerge) form a pipeline of primitives, each reading an input and producing an output.
Text (text, tspan, textPath) lays out glyphs.
Animation (animate, animateTransform, set) changes attributes over time (SMIL).

Example

A blurred drop shadow uses a filter pipeline:

<filter id="shadow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
  <feOffset in="blur" dx="2" dy="2" result="off"/>
  <feMerge>
    <feMergeNode in="off"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

Notes

Reusable definitions (gradients, filters, symbols) go inside defs and are referenced by id so they do not render on their own.
The use element clones a referenced element, letting you reuse shapes and symbols efficiently.
This reference covers the common elements, not the entire SVG 2 specification.