Search code examples
svgvector-graphicsinkscape

Shape inheritance in SVG

Is there a concept of shape inheritance in SVG?

Problem: I'm creating a map with various icon types that represent different entities on the map. Is there a way to link these icon types, so that I can modify the "parent" (say the icon in a legend) and all the "children" will inherit those properties?

Doing it in Inkscape, but I'm hoping it's an SVG property, and thus a valid Stackoverflow question.

Solution

  • I'm not sure what you mean by "properties".

    You can use CSS class="foo" to apply visual styling to your elements, e.g. fill:red; stroke-width:2px. Changing the CSS rule will affect the visual style of all shapes with that class.

    However, perhaps what you want is the <use> element, which allows you to have many lightweight references to a single shape (or arbitrary set of geometry) placed throughout your document. Changes to the original shapes/paths/visual styles affect all instances.

    A <use> element may reference a specific shape, a <g>roup of shapes, or even an entire <svg> document.

    To create a special source graphic that is not displayed on its own you can either use a <symbol> (which has a viewBox), or place any content in the <defs> section (such as a <g>).

    Here is an example showing the use of symbols and <use> to place identical markers on a map:
    http://www.carto.net/svg/samples/symbol.shtml