An SVG fragment identifier is the part of a URL after #. It can target an element in the SVG, select a predefined view, or—in SVG 2—describe a view or media range. The fragment is interpreted within the SVG resource; it does not create another HTTP path.
What does the #id at the end of an SVG URL do?
In a URL such as drawing.svg#logo, the fragment is #logo. The client first identifies the SVG resource, then interprets the fragment to select a target or view within it. RFC 3986 describes a URI fragment as identifying a secondary resource or a view on the primary resource’s representation: RFC 3986.
SVG 2 defines fragment identifiers as the selector portion of URLs locating resources with the image/svg+xml media type. It describes bare-name fragments, SVG view specifications, and basic media fragments: W3C SVG 2 linking.
How does the #id form work?
A bare-name fragment such as drawing.svg#logo addresses the SVG element whose id is logo. When the matching ID belongs to a <view> element, the SVG is displayed using that view’s settings, overriding corresponding settings on the root SVG element. MDN describes selecting a specific view by referencing the <view> element’s ID in the URL: MDN: <view>.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
Use this method when you can edit and version the SVG. A named view makes the intended framing readable and maintainable:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200">
<view id="detail" viewBox="100 20 80 80" />
...
</svg>Then reference it as drawing.svg#detail. Keep IDs unique within the SVG and stable if other pages or assets depend on them.
What is svgView()?
svgView() puts view parameters directly in the URL, for example drawing.svg#svgView(viewBox(0,0,100,100)). It is useful when you cannot change the SVG to add a named <view>. MDN documents this URL form for specifying a view without editing the file: MDN: viewBox.
SVG 2 allows view attributes including viewBox(...), preserveAspectRatio(...), transform(...), and zoomAndPan(...) in a view specification. Parameters follow SVG and CSS transform rules. Commas separate numeric values in examples; semicolons separate view attributes. A semicolon can be percent-escaped as %3B in contexts where semicolons act as list separators. Check the SVG 2 grammar for the precise syntax: W3C SVG 2 linking.
Free tools Windows power users keep installed
One-click scans. No signup required.
Can a URL crop an SVG?
A view specification can change the displayed viewBox and therefore show a selected portion of an SVG. For example, drawing.svg#svgView(viewBox(0,0,100,100)) requests a viewBox covering the coordinates from 0 to 100 on each axis. This changes the view of the resource; it does not edit or permanently crop the SVG file.
A named <view> can provide a reusable crop when you control the source. Inline svgView() can express one in a URL when you do not. Neither approach should be confused with a guarantee that every embedding context treats every SVG fragment identically.
What happens when an SVG URL is opened?
- No fragment: The initial view comes from the outermost
<svg>element’s view attributes, such asviewBox. - Fragment naming a
<view>: That view’s settings override corresponding root settings. svgView()fragment: Parameters in the URL override corresponding root settings. Parameters not specified do not reset root values.
These rules are described in the SVG linking specification and the SVG view specification: W3C SVG 2 linking and W3C SVG 2 coordinates and views.
How do SVG fragments differ from resource references?
SVG uses fragment syntax both in URLs that identify a view or target and in references to resources within an SVG. For example, <rect fill="url(#MyGradient)" /> refers to a gradient in the same document. The context—the consuming element or CSS property—determines which target type is valid. The SVG linking specification includes same-document and external references such as sprite.svg#logo: W3C SVG 2 linking.
Recommended Free Tools
Best Value
What are SVG media fragments?
SVG 2 lists spatial and temporal media-fragment forms. Examples include drawing.svg#xywh=0,200,1000,1000 for a spatial region and animation.svg#t=10 for a time point. Non-time and time identifiers can be combined with &. These are SVG 2-defined forms, but their support should be verified in the browsers and embedding modes you intend to support; do not assume they work consistently in production. See W3C SVG 2 linking.
Why might an SVG fragment work in one browser but not another?
Support depends on the fragment form and how the SVG is consumed. MDN marks the <view> element as widely available across browsers since October 2018, while noting that some parts may vary: MDN: <view>. SVG 2’s xywh and t media fragments warrant particular compatibility checks rather than assumptions.
Also test the exact context you ship. Navigation to an SVG, an <img>, an <object>, CSS url(), and a paint-server reference such as url(#gradient) are not interchangeable situations: the reference context affects which target is meaningful.
Quick Recap
How should you author and test SVG fragment URLs?
- Choose the form: Use a named
<view>and#idwhen you can edit the SVG; usesvgView()when you cannot; rely on media fragments only after checking target support. - Make IDs dependable: Use URL-safe, stable IDs that are unique within the SVG document.
- Keep syntax clear: Use the documented commas for numeric values and semicolons between view attributes; percent-escape semicolons as
%3Bwhere the containing context treats semicolons as separators. - Test the complete URL: Try it in every browser and embedding mode you plan to use, including navigation,
<img>,<object>, or CSSurl(), as applicable.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
