Canvas Docs

Inline SVG

Vector icon drawn from SVG path data, with size, colour, viewBox and per-layer opacity as sidebar controls. It is shown in the block inserter as Canvas Inline SVG and registered as canvas-core/inline-svg.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Inline SVG settings in the block editor sidebar

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Content

  • PathsDefaultEmpty

    The shapes the icon is drawn from, one row each, in the order they are painted.

    Each row of Paths takes:

    • ShapeDefaultPath

      Most icons are paths. A design that draws with circles, rectangles or lines needs the matching primitive: those cannot be expressed as path data without redrawing the icon.

      ChoicesPathCircleEllipseRectangleLinePolylinePolygon

    • Path Data (d)DefaultEmpty

      The SVG path "d" attribute, e.g. M63.81,192.19c-47.89…Z

      Shown when Shape is "Path"

    • GeometryDefaultEmpty

      The shape's own coordinates, written as attribute pairs: cx/cy/r for a circle, x/y/width/height for a rectangle, x1/y1/x2/y2 for a line, points for a polyline or polygon.

      Shown when Shape is "Circle" or "Ellipse" or "Rectangle" or "Line" or "Polyline" or "Polygon"

    • OpacityDefaultEmpty

      Optional. Leave empty for a fully opaque layer.

    • Fill OverrideDefaultEmpty

      Optional per-layer colour. Leave empty to inherit the icon colour.

    • Fill RuleDefaultEmpty

      Choose evenodd when the shape has a hole in it that must stay transparent.

      ChoicesDefault (nonzero) (empty)nonzeroevenodd

    • Layer CSS ClassesDefaultEmpty

      Classes on this layer: e.g. a hook the stylesheet fills with the theme colour.

    • Layer Inline StyleDefaultEmpty

      Inline style on this layer. Unsafe declarations are stripped, as on any block.

    • Layer TransformDefaultEmpty

      SVG transform applied to this layer.

    • Layer StrokeDefaultEmpty

      Outline colour for this layer. Leave empty for a filled shape.

    • Layer Stroke WidthDefaultEmpty

      How thick the outline is drawn.

      Shown when Layer Stroke is set

    • Layer Stroke CapDefaultEmpty

      How the ends of an open outline are finished.

      ChoicesDefault (butt) (empty)RoundSquareButtShown when Layer Stroke is set

    • Layer Stroke JoinDefaultEmpty

      How two outline segments are finished where they meet.

      ChoicesDefault (miter) (empty)RoundBevelMiterShown when Layer Stroke is set

  • Accessible TitleDefaultEmpty

    Optional. Set this when the icon carries meaning on its own: it emits role="img" plus an SVG .

  • Decorative (hide from screen readers)DefaultOff

    Hide the icon from screen readers. Use it when the icon repeats the wording beside it and adds nothing on its own. It is ignored once an Accessible Title is set.

    Shown when Accessible Title is empty

Settings

  • WidthDefault24

    Width attribute in px. 0 = omit.

  • Width (%)Default0

    Percentage width for a separator that spans its container. Any value above 0 replaces the px width.

  • HeightDefault24

    Height attribute in px. 0 = omit.

  • ColourDefaultEmpty

    Icon fill. Leave empty to inherit the current text colour.

  • Group TransformDefaultEmpty

    An SVG transform applied to every layer at once. Icon exports commonly hold their shapes in one group so a single transform positions the whole drawing; paste that transform here and the layers keep their own.

  • viewBoxDefault0 0 256 256

    The coordinate system the path data is drawn in.

  • Emit the SVG NamespaceDefaultOn

    HTML5 implies the SVG namespace, so a decorative separator drawn inline can drop the attribute. Keep it on for an icon that may be copied out of the page.

  • preserveAspectRatioDefaultEmpty

    How the drawing scales inside its box. Empty omits the attribute (the SVG default).

  • Rendered Height (data-height)DefaultEmpty

    Height in px a full-width separator is drawn at. Empty omits the attribute.

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Content: Background Video / Audio, Cascading Images, Charts, Circle Stack, Clients, Data Tables.

Was this page helpful?