Inline SVG
Admin UI extensions can render inline SVG in extension markup. Any extension target that renders UI can use it.
Inline SVG isn't a Shopify web component and doesn't use an s-* tag. It's a supported subset of native SVG markup that can render alongside Shopify web components.
Use inline SVG for simple icons, diagrams, and decorative or informational graphics that aren't covered by the icon component.
Anchor to Use casesUse cases
- Custom icons: Show a brand mark or a symbol that the icon component doesn't include.
- Simple diagrams: Illustrate steps, flows, or relationships in a configuration screen.
- Status graphics: Draw a progress ring or a small chart from your extension's data.
- Decorative accents: Add visual interest that repeats what nearby text already says.
The following example shows an icon with an accessible name, drawn with a path that inherits the surrounding text color:
HTML
Anchor to Supported elementsSupported elements
The following SVG elements are supported:
| Category | Elements |
|---|---|
| Root, grouping, and definitions | svg, g, defs |
| Shapes | path, circle, line, rect, polygon, polyline, ellipse |
| Text and accessible names | text, title, tspan |
| Local paint, clipping, masks, and markers | clipPath, mask, pattern, linearGradient, radialGradient, stop, marker |
| Filters | filter, feDropShadow, feFlood, feGaussianBlur, feMerge, feMergeNode, feOffset |
Other SVG elements aren't part of the supported subset.
Anchor to Supported attributesSupported attributes
The following SVG attributes are supported:
| Category | Attributes |
|---|---|
| Root and sizing | viewBox, xmlns, width, height, preserveAspectRatio |
| Paint and effects | fill, stroke, opacity, mask, filter |
| Geometry and transforms | d, cx, cy, r, rx, ry, x, y, x1, x2, y1, y2, points, pathLength, transform |
| Gradients | gradientUnits, offset |
| Text, filters, and markers | dx, dy, stdDeviation, refX, refY, orient, in, result |
| Identity and accessibility | id, role, aria-hidden |
The following attributes can be written in either React-style camelCase or DOM-style kebab-case:
| Category | Attributes |
|---|---|
| Fill and clipping | fillOpacity / fill-opacity, fillRule / fill-rule, clipRule / clip-rule, clipPath / clip-path |
| Stroke | strokeWidth / stroke-width, strokeLinecap / stroke-linecap, strokeLinejoin / stroke-linejoin, strokeDasharray / stroke-dasharray, strokeDashoffset / stroke-dashoffset |
| Gradient stops | stopColor / stop-color, stopOpacity / stop-opacity |
| Text | textAnchor / text-anchor, dominantBaseline / dominant-baseline, fontSize / font-size, fontWeight / font-weight |
| Filters | floodColor / flood-color, floodOpacity / flood-opacity |
| Markers | markerWidth / marker-width, markerHeight / marker-height, markerStart / marker-start, markerMid / marker-mid, markerEnd / marker-end |
The role attribute accepts only img, presentation, and none. Use role="img" with a child <title> element when the SVG needs an accessible name. Use aria-hidden="true" for decorative SVGs.
Anchor to Refused elements, attributes, and valuesRefused elements, attributes, and values
Inline SVG uses an allowlist so that extensions can render graphics without gaining new script, style, network, or interaction capabilities. The following common SVG features aren't supported:
- URL-bearing elements and attributes, including
use,symbol,image,feImage,textPath,href,xlink:href,xlinkHref, andsrc, because they depend on URL loading. foreignObject, because it embeds non-SVG content.script,style, animation elements, inlinestyleattributes,class, andclassName, because extensions can't add arbitrary scripts or borrow Shopify admin styles.- SVG event handlers such as
onclickor otheron*attributes, because the SVG subset is render-only. aria-labelandaria-labelledby. To name an SVG icon, use a child<title>element instead.- Role values other than
img,presentation, andnone. Interactive roles such asbuttonorlinkare refused because inline SVG is render-only and doesn't support event handling.
Refused markup is ignored silently, without an error or a console warning. A refused attribute or value isn't applied, and the rest of the element still renders. If an update to an attribute that's already set is refused, the last accepted value stays in place, so remove the attribute when you need it cleared. A refused element renders nothing, including its children. If part of a graphic is missing, check its elements, attributes, and values against the lists on this page.
Anchor to URL references and IDsURL references and IDs
Same-document fragment references are supported in CSS-style url(#id) values, including url("#id") and url('#id'). For example, a shape can reference a gradient with fill="url(#gradient)".
External references are refused. Values such as url(https://example.com/image.svg), url(/admin/...), src(...), image-set(...), image(...), cross-fade(...), and element(...) aren't supported. Backslashes are also refused in CSS-parsed SVG values because CSS escapes can hide URL-loading functions.
IDs that you define inside inline SVG are rewritten each time your extension renders, and local url(#id) references are rewritten to match. Don't depend on the final DOM ID value. Treat IDs as local to a single render and use them only for references inside the same SVG tree.
Anchor to ExamplesExamples
Anchor to Name an iconName an icon
Give an SVG an accessible name with a child <title> element and role="img". aria-label and aria-labelledby are refused, so <title> is how an icon gets its name.
Preview
html
Anchor to Mark an SVG as decorativeMark an SVG as decorative
Hide an SVG from assistive technology with aria-hidden="true" when the graphic only repeats information that nearby text already carries.
Preview
html
Anchor to Reference a gradientReference a gradient
Reference a gradient defined in the same SVG with fill="url(#id)". Only same-document references are supported, and IDs are rewritten each time your extension renders, so use them only for references inside the same SVG tree.
Preview
html
Anchor to Combine with web componentsCombine with web components
Inline SVG renders alongside Shopify web components. Paint with currentColor so the graphic inherits the surrounding text color instead of hardcoding a value.