According to this page How SVG Fragment Identifiers Work, the SVG <view> element…
can actually wrap other elements, in which case that viewBox takes hold when the ID matches
However, I cant get it to work.
This is a simple SVG file:
<svg viewBox="0 0 500 100" width="100" height="100"
xmlns="http://www.w3.org/2000/svg">
<view id="one" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="red" />
</view>
<view id="two" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="green" />
</view>
<view id="three" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="blue" />
</view>
<view id="four" viewBox="200 0 100 100" >
<circle cx="250" cy="50" r="40" fill="yellow" />
</view>
<view id="five" viewBox="300 0 100 100" />
<circle cx="350" cy="50" r="40" fill="cyan" />
<circle cx="50" cy="50" r="20" fill="black" />
</svg>
This is the calling HTML:
<!DOCTYPE html>
<html><head>
<style>
img {border:1px solid #080;}
img.red {content:url("foo.svg#one");}
img.green {content:url("foo.svg#two");}
img.blue {content:url("foo.svg#three");}
</style>
</head><body>
<img class="red" />
<img class="green" />
<img class="blue" />
<img src="foo.svg#four" />
<img src="foo.svg#five" />
</body></html>
The only circle actually shown is the cyan one. Anyone knows what is going on here?
2
Answers
I have never seen
<view>work (the way I wanted it to work)Every browser supports native Web Components to create HTML/SVG dynamically.
And can replace
<use>and<symbol>with JS code.Unlike
<symbol>elements<view>must not contain geometry/rendered elements.That’s why your first circle don’t show up.
<view>elements are used to specify predefined views.So you can pan a svg sprite sheet to a specific region via target ID – whereas you would otherwise no need to adjust background positions.
(To some extent you might compare them to HTML
<a>anchor targets, helping you to jump to a specific section of a page)The view element can only be used for sprite sheets with elements spread across the spritesheet area. Overlapping elements won’t work.
In your case your first elements are overlapping.
A
<view>doesn’t change any visibility properties – so you’ll see the topmost element. You can delete the<view>elements for these graphicsFor overlapping elements we you can hide not targeted elements by CSS.
Here’s a modified example svg:
Basically we’re combining two fragment identifier techniques
viewBox="0 0 100 100"to match the desired 100×100 "icon" size.Advantage of
<view>spritesheetsAlthough the view concept seems to be very limited, the main advantage: you can easily edit all your sprites in a graphic editor as all items remain visible.
If you need to add a new icon: just place it next to the previous ones and define a new
<view>area (illustrated by red boxes).You can also compare alignment, size, stroke width and other visual properties at a glance to ensure consistent icon design.
Whereas when working with
<symbol>or<defs>elements you need to unwrap the hidden icons to see them in your editor.Drawbacks: you can’t change any style properties like fill/stroke (just like any other image/background-image usage)