SVG Basics

Operations: Grouping, Reusing, Scaling, Translation and Rotation

Thus far we have had the opportunity to see much similarity between SVG and HTML: two markup languages with tags and attributes that modify the way those tags look. Where SVG starts to look less like a markup language and more like a programming environment is in its ability to reuse and modify its own content (within its own system). That is, elements can be contained in other elements in such a way that containers modify the appearance of the elements inside them. Specifically we can group and reuse elements in ways that simplify maintenance of code and which shorten the overall length of our documents. The <use> (reuse) and <g> (or group) tags bear similarity to the variables and objects encountered in programming languages. And while those tags can be exemplified with examples drawing just on the "simple objects" discussed earlier in this chapter, their utility becomes, perhaps more pronounced once we have the abilities to transform objects using the isometric planar primitive operations of translation, rotation (including reflection), and scaling.

Transform/translate:

The three easiet ways to move things around in SVG are rotation, scaling and translation. All are considered to be special cases of the transform attribute of a tag. Suppose we have an object, like a complex path, which we have drawn (either by typing coordinates, or with a graphical editor) and once we bring it into our SVG document, we discover, that while we like the shape, it needs to be moved around a bit. That's what transform=translate is for. The syntax looks like this:

transform=translate(dx,dy)

where dx and dy represent the change in the current position on the x and y axes. Using transform=translate(0,0) would leave an object at its current position. Here's a simple example in which a complex path is drawn near a simple ellipse, before and after the application of a translation 100 pixels leftward and 100 pixels up:

<?xml version="1.0" standalone="no"?>

    
<svg width='550' height='300' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <rect x='50' y='50' width='200' height='200' stroke='black' stroke-width='1' fill='None' />
   <circle cx='150' cy='150' r='144' stroke='black' stroke-width='3' fill='None' />
   <circle cx='150' cy='137.5' r='112.5' stroke='red' stroke-width='1' fill='None' />
   <circle cx='150' cy='150' r='112.5' stroke='blue' stroke-width='1' fill='None' />
   <path stroke='blue' stroke-width='2' fill='None' 
       d='M150,162.5m0,-50a50,50 0,0,1 100,0q0,100 -100,150q-100,-50 -100,-150a50,50 0,0,1 100,0' />
   <path transform='translate(0,-12.5)' stroke='red' stroke-width='4' opacity='.9' fill='#c77' 
       d='M150,162.5m0,-50a50,50 0,0,1 100,0q0,100 -100,150q-100,-50 -100,-150a50,50 0,0,1 100,0' />
</svg>    

Transform/rotate

If we have drawn an object like an ellipse, centered at (cx,cy) and we wish to rotate it clockwise by r degrees, then transform=rotate(r, cx, cy) is the attribute for us. Following is an example of a figure before and after rotation of 120 degrees. The operation is performed via:

transform="rotate(120,219.5,241)"

The point (219.5, 241) is chosen as the center of rotation, since it represents the midpoint of the bounding rectangle enclosing the un-rotated shape. (Again this point is determined through a JavaScript calculation involving getBBox(), a method that will be discussed later.)

<?xml version="1.0" standalone="no"?>

    
<svg width='550' height='300' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <circle cx='150' cy='150' r='145' stroke='black' stroke-width='3' fill='None' />
   <circle cx='150' cy='150' r='112.5' stroke='black' stroke-width='1' fill='None' />
   <path stroke='black' stroke-width ='2' opacity='.6' fill='#c77' 
       d='M150,162.5m0,-50a50,50 0,0,1 100,0q0,100 -100,150q-100,-50 -100,-150a50,50 0,0,1 100,0' />
   <path transform='rotate(90 150 150)' stroke = 'black' stroke-width ='2' opacity = '.6' fill = '#877' 
       d='M150,162.5m0,-50a50,50 0,0,1 100,0q0,100 -100,150q-100,-50 -100,-150a50,50 0,0,1 100,0' />
</svg>    

Transform/scale

Scaling or resizing an object is a wee bit tricky. The syntax of the command is straightforward but since the scaling operation multiplies all (x,y) coordinates by scaling coefficients, objects will typically appear to move away from or toward the origin as they expand or shrink. In order to keep an object more or less "in place" as it is rescaled, we must combine the scale operation with a translation. Another side effect of scaling is that when negative numbers are multiplied by all the coordinates, the object will appear to flip or reflect about one or both axes.

The illustration below shows an ellipse centered at (100,50) (as well as an accompanying text label), before and after a rescale by a factor of 2.5. Note that the ellipse's center (like all the points on the ellipse) has each of its coordinates rescaled by the same factor.

<?xml version="1.0" standalone="no"?>

    
<svg width='550' height='250' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <ellipse cx='100' cy='50' rx='40' ry='20' fill='grey' stroke='black' stroke-width='12' />
   <ellipse cx='100' cy='60' rx='40' ry='20' fill='grey' stroke='black' stroke-width='12' 
       transform='scale(2.5)'
</svg>    

Note that the scale command resizes not only the object, but also its border or stroke.

If we wish to expand a figure differently in one direction than the other, we simply add a second parameter to the transform as shown in the following in which we rescale by a factor of three horizontally, but only x 1.2 vertically.

<?xml version="1.0" standalone="no"?>

    
<svg width='550' height='200' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <path d='M5 100h50v-20l50,50h-100z' fill='grey' stroke='black' stroke-width='4' />
   <path d='M5 100h50v-20l50,50h-100z' fill='grey' stroke='black' stroke-width='4' 
       transform='scale(3.5,1.5)' />
</svg>    

Note here that the hash marks associated with the dasharray remain no longer perpendicular to the path.

Below is an example in which we scale differentially in the x and y directions, preserving the height by multiplying it by 1.0, but flipping and shrinking horizontally by multiplying by -0.5.

<?xml version="1.0" standalone="no"?>

    
<svg style='border:1px solid black' width='580' height='375' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
<svg width='526' height='351' viewBox='-25, -200, 526, 351' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
       <path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
   </pattern>
   <pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
       <rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
       <path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
   </pattern>
   <rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>
  
   <path d='M150-50 h100v-100z' fill='grey' stroke='black' stroke-width='4' stroke-dasharray='1,5'/>
   <path d='M150-50 h100v-100z' fill='grey' stroke='black' stroke-width='4' stroke-dasharray='1,5' transform='scale(1,-0.5)' />
  </svg>
<text x='5' y='192' font-size='20'>(0,0)</text>
<text x='495' y='192' font-size='20'>(500,0)</text>
<text x='5' y='370' font-size='20'>(0,150)</text>
<text x='495' y='370' font-size='20'>(500,150)</text>
<circle cx='25' cy='200' r='2' fill='black'/>
<circle cx='525' cy='200' r='2' fill='black'/>
<circle cx='25' cy='350' r='2' fill='black'/>
<circle cx='525' cy='350' r='2' fill='black'/>
</svg>
    

Differential, negative and fractional scaling