Background: SVG documents can be used as containers for other bitmap or vector images. Within such documents, "fragment identifiers" (e.g. #myfragment) can be configured to pan, zoom or transform the rendering within the document viewport, or to show or hide objects such as highlights, annotations or layers. Such configuration requires only xml and css; it doesn't depend on javascript.
Example document: in the following svg source code, a png screenshot has seven rectangles laid over it. Each shape has the same class, which is styled as invisible by default, but as a red box when it is the target of the URI. Of course, in a production example the style would probably be maintained in shared external css.
Code: Select all
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="394px" height="129px" viewBox="0 0 394 129" >
<defs>
<style>
.myhighlight { display: none; }
.myhighlight:target { display: block; fill: none; stroke: red; stroke-width: 2; }
</style>
</defs>
<g>
<image style="overflow:visible;" width="394" height="129" id="ribbon" xlink:href="screenshot-1.png" />
<rect class="myhighlight" id="linkbutton" x="11" y="9" width="42" height="68" />
<rect class="myhighlight" id="imagebutton" x="54" y="9" width="42" height="68" />
<rect class="myhighlight" id="mediabutton" x="102" y="9" width="42" height="68" />
<rect class="myhighlight" id="tablebutton" x="150" y="9" width="42" height="68" />
<rect class="myhighlight" id="variablebutton" x="202" y="9" width="70" height="22" />
<rect class="myhighlight" id="snippetbutton" x="202" y="33" width="70" height="22" />
<rect class="myhighlight" id="togglebutton" x="202" y="57" width="70" height="22" />
</g>
</svg>
Suggested functionality:
- Either recognize fragment identifiers in H&M XML <image> file names and URIs, e.g. <image src="mycontainer.svg#myfragment" ...
- Or add an optional fragment attribute to H&M XML <image> elements, e.g. <image src="mycontainer.svg" fragment="myfragment" ...
- Use the fragment identifier when rendering <image> elements in the editor and when publishing
- Consider allowing a global or topic variable to be used to determine the fragment identifier. This offers flexibility for dynamic overlays and locale-dependent screenshots in future.