Fragment identifiers in image URIs

Nothing is perfect! This is where you can post your ideas and wishes for functions you'd like to see in Help & Manual. Current version only please (H&M7).

Moderators: Alexander Halser, Tim Green

Post Reply
Simon Dismore
Posts: 454
Joined: Thu Nov 16, 2006 1:29 pm
Location: London, UK

Fragment identifiers in image URIs

Unread post by Simon Dismore »

Summary: when inserting an svg document, accept a fragment identifier at the end of the file name or URI, and use this for rendering or converting the document. This provides a flexible standards-based method for defining hotspots, highlights, overlays, filters, blurs etc. It could be an alternative file format for Impict.

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>
Demonstration: the different highlights in the example can be displayed in a modern browser just by appending the id of the highlight fragment (e.g. "#tablebutton") to the base URI of the svg file. In Chrome you can even do this via the file system (e.g. "file:///W:/hm/SVG-test/Baggage/highlight.svg#tablebutton"). If a fragment identifier isn't recognized, it will be ignored.
svg-screenshot-highlights.gif
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.
Thanks for considering this.
You do not have the required permissions to view the files attached to this post.
Simon Dismore
Posts: 454
Joined: Thu Nov 16, 2006 1:29 pm
Location: London, UK

Re: Fragment identifiers in image URIs

Unread post by Simon Dismore »

This question came up today and it's another example of something that would work well with the fragment identifiers I proposed back in 2015. The idea is that you can use CSS to define how a targetted ID and its children should be displayed. By appending an fragment identifier (e.g. #mediabutton) to an SVG URI, you can make it the target that gets styled. My original example showed how to use fragments to make targeted highlights visible. Here's a new one that rotates and/or scales a PNG image using predefined IDs in a little SVG wrapper.

Example document: in the following svg source code rendering is done in a canvas from (-140,-140) to (140,140) so scaling and rotation work around the central (0,0) point. A group ("mygroup") containing the original 144 x 280 pixel png image plus overlay text is <def>ined only once, then <use>d with nine different IDs, each use having a different scale/rotation. Nothing is visible unless it is a target, or a child of one.The animation shows the effect of appending different target IDs to the URI.

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="280px" height="280px" viewBox="0 0 280 280" >

<defs>
  <style>
    .myview { display: none; }
    .myview:target { display: block; overflow:visible; }
    text { fill: tomato;  font-family: sans-serif; font-size: 2em; font-weight: 700;}
  </style>
  <g id="mygroup">
    <image id="myimage" x="-72" y="-140" width="144" height="280" xlink:href="original-image.png" />
    <text style="text-anchor: middle">Help & Manual</text>
  </g>
</defs>

<g transform="translate(140,140)">
  <use class="myview" id="s100"     xlink:href="#mygroup" transform="scale(1)" />
  <use class="myview" id="s100-r45" xlink:href="#mygroup" transform="scale(1) rotate(45)" />
  <use class="myview" id="s100-r90" xlink:href="#mygroup" transform="scale(1) rotate(90)" />
  <use class="myview" id="s50"      xlink:href="#mygroup" transform="scale(0.5)" />
  <use class="myview" id="s50-r45"  xlink:href="#mygroup" transform="scale(0.5) rotate(45)" />
  <use class="myview" id="s50-r90"  xlink:href="#mygroup" transform="scale(0.5) rotate(90)" />
  <use class="myview" id="s150"     xlink:href="#mygroup" transform="scale(1.5)" />
  <use class="myview" id="s150-r45" xlink:href="#mygroup" transform="scale(1.5) rotate(45)" />
  <use class="myview" id="s150-r90" xlink:href="#mygroup" transform="scale(1.5) rotate(90)" />
</g>

</svg>
svg-image-wrapper-scales-and-rotates.gif
You do not have the required permissions to view the files attached to this post.
Post Reply