SVG File Linking

svg demo
Figure 1

When creating an SVG library of Islamic designs, an attractive idea you might wish to implement is how to persist and reuse a variety of classic baseline shapes.

This library should be saved as a local SVG file(s) on your computer.

The question is, how can you programatically “import” into your current SVG design file an external shape such that it works correctly with a regular (textual) editor or graphics design tool (such as Inkscape)?

SVG provides a mechanism for importing external files:  the href attribute, which allows a graphic designer to reference a resource URL containing a desired SVG element or shape.

The diagram above — which is based on a snapshot of an SVG file running on Opera on my desktop — describes the concept in an idealized way.

Unfortunately, I cannot easily demo this file using Codepen due to the SOP restriction imposed by browsers.

However you see the code I used to design the cube here — minus the href directive.

You can also view the code for the circle asset in this gist.

As you can see from the screenshot below (Figure 2), href works on Inkscape.

Figure 2


A note of caution.

You cannot actually access the lib.svg code in the Inkscape XML editor.

You can, however. move the circle around by selecting it and moving it with your mouse to some other location on the document.

Inkscape achieves this via matrix transforms.

Such code is extremely hard to visualize.

SVG code
Figure 3 — ugh!

Moreover, grabbing a cirlce in Inkscape can inadvertently skew it and change it into an ellipse.  This side-effect is undesirable, unless you can somehow lock the radius attribute of a circle, which I have not figured out how to do.

It is, of courses, possible to dispense with the transforms in the Inkscape ouput code, and change the circle elements’ x and y attributes.

This then diminishes the value of using Inkscape to create baseline shapes for the SVG library, since one would constantly have to reconcile 2 versions of a design.

Given that we would have to figure out the coordinates (of a moved shape) anyway, it is cleaner to create the Islamic starter set designs by hand.

In this fashion, we will have complete control of the code, without any of the superfluous verbosity that Inkscape outputs, as well as total control over the placement and size of the shapes we create.

I will demonstrate this in the next post.

That said, I shall examine in future posts if Inkscape has any value in simplifying the creation of complex designs (using layering) based on including shape primitives that we source out from our SVG Islamic shapes library.

A final technical detail, before I conclude this post.

To make the linking work on your machine (assuming you have installed a local server such as Xampp), add this line of code to your current design file.

 <use href="lib.svg#circle"></use>

where lib.svg is the name of the library file in your xampp/htdocs/somefolder setup.

Here is what mine looks like.

htdocs folder
Figure 4


The href (xlink:href is now deprecated) directive should appear immediately following the closing bracket of the initial SVG element declaration in your code, which will cause the imported shape to load first. You can see what I mean in the figure below.

SVG demo
Figure 5

Note: In the SVG shown above, I kind of just winged the cube by creating squares that I thought looked right in relation to each other, then connected them with lines to simulate this shape.  This is unacceptable, if one wishes to be precise geometrically with respect to 3D perspective.  In a future post, I shall explore how to deal to with the lack of a z-index property in SVG, when implementing correctly a custom cube shape. An interesting problem will be how browsers maintain perspective, while animating the SVG cube with a CSS3 rotate3d() transform.


# # #