Creating and Editing SVG Graphics

  • 7/15/2012

Accessing and Reusing Graphics

From buttons, icons, and window UIs, to building graphs and gaming graphics, there are many logical use cases for accessing and reusing raster and vector graphics in SVG.

Linking to both internal and external image data is worth a quick mention here because it is a common method for accessing and reusing SVG.

Referencing Vector and Bitmap Images

The SVG language provides the <image> element, which can reference other SVG images, as well as PNG and JPEG bitmap images. The syntax for the <image> element is similar to the <rect> element in that it has x, y, width, and height attributes.

The <image> element has the additional attribute xlink:href, which allows you to specify the location of the referenced image. Similar to HTML’s href attribute, the xlink:href attribute allows the referenced image to be stored either locally or on the Internet. The code for referencing a bitmap image is as follows:

<image xlink:href="GrandMothersParty-121YO.png" x="340" y="0" width="140"
  height="160" opacity="0.5"/>

Referencing other SVG images is just as easy and becomes very useful in many application scenarios, such as reusing the same vector symbol on a page or dynamically loading vector images on demand.

The Group Element

The SVG group element, <g>, is great for logically grouping sets of related graphical objects. This group capability makes it easy to add styles, transformations, interactivity, and even animations to entire groups of objects. The following code groups a circle and a bitmap image together into a group named iris, which is then grouped together with an ellipse shape into another group named eye.

<!-- Group containing the eye. -->
<g id="eye">
  <!-- Draw the ellipse. -->
  <ellipse fill="#a1d9ad" fill-opacity="0.7" fill-rule="nonzero"
           stroke="#32287d" stroke-width="1" stroke-opacity="0.5" />

  <!-- Group containing the eye's iris. -->
  <g id="iris"
     cx="50" cy="50" rx="20" ry="14" />

     <!-- Draw the circle. -->
     <circle fill="black" fill-opacity="1" fill-rule="nonzero"
             stroke="#32287d" stroke-width="1" stroke-linecap="butt"
             stroke-linejoin="bevel" stroke-miterlimit="4"
             id="path3395" cx="50" cy="50" r="10" />

     <!-- Reference the bitmap image (PNG) -->
     <image id="bitmapCentralBall"
             width="5.5%" height="5.5%"
             x="39px" y="42px"
             xlink:href="iris-small.png"
             alt="NASA Photo of Jupiter" />
  </g>
</g>
httpatomoreillycomsourcemspimages1261215.png

With some creativity, you could then add some scripted interactivity such that the iris group could follow the mouse, while the eye group could blink randomly or at set intervals.

You’ll see another great use for <g> during the discussion of transformations and interactivity in SVG in Chapter 4, “Motion and Interactivity.” You can associate items together in a group and then define transformations to move, scale, or rotate all the items together so that their spatial relations to one another are maintained. Through the use of interactivity in SVG, you can assign, for example, an onclick event to an entire group so that all elements within the group respond to the event.

The <use> Element

The <use> element lets you reuse existing elements and thus write less code. Like the <image> element, <use> takes x, y, height, and width attributes, and it references other content using the xlink:href attribute.

As an example, you can reuse the following rectangle

<!-- Draw the upper-right rectangle. -->
<rect fill="#ada1d9" fill-opacity="1" fill-rule="nonzero"
    stroke="#32287d" stroke-width="10" stroke-linecap="butt"
    stroke-linejoin="bevel" stroke-miterlimit="4" stroke-opacity="0.4"
    id="rectangle" width="20" height="20" x="90" y="-10" />

by referencing it with the <use> element:

<!-- Reuse the first rectangle element and move it to a different position. -->
<use x="" y="" xlink:href="#rectangle" />