[SOLVED] Request part of SVG in <img> (or <object>)

Request part of SVG in <img> (or <object>)

Could I load only part of a SVG (that could be identified by an #id tag) in an <img> or <object> tag ?

Reason (if I need one) is I don't want to have two SVG files if I'm only using part of a already in use one.

If I can't by using these tags, could I by using CSS or other means ?

Solution

What you want to achieve is easiest done with another inline SVG instead of a <img> or <object> tag:

<svg style="width:200px;height:200px" viewBox="35 50 150 150">
    <use xlink:href="myFile.svg#head" />
</svg>

Two things you need to get right are

the viewBox: to get just the part of your SVG that you want, you have to identify where the path is and what bounding box it has. The <use> element takes care that only the element you select is visible, but it does not identify where inside that image the element is.
the overall size your selected element is shown at. SVG has no notion of a "natural size, you always have to give a width and height. The viewBox will then be fitted inside that area.