SVG and Typography: Bells and Whistles
by Fabio Arciniegas A. |

Image Within Type

The inverse of the previous effect is also a common typographic treatment: image within type, or, in SVG terms, using type as the mask.

<?xml version="1.0"?>

<svg xmlns="http://www.w3.org/2000/svg" 

xmlns:xlink="http://www.w3.org/1999/xlink"

width="400" height="300" version="1.1">

  <defs>

  <mask id="britannia">

      <text x="0" y="100" 

      style="font-size:50pt; 

      font-weight:bold;  

      fill:white;">BRITANNIA</text>

  </mask>

  </defs>

  <g mask="url(#britannia)">

    <image x="0" y="0" 

    width="400px" height="205px"

    xlink:href="brit.jpg" />

  </g>

</svg>

Listing 4. imageintype.svg

Figure 4. Image within type

Stroke

One very common effect applied to text in design programs is stroke. The idea is an effect similar to that of outline (which you can do with the CSS property), but slightly more subtle as it comes not from really outlining the text but from composing a dilated version of it (expanded) with the original.

<?xml version="1.0"?>

<svg xmlns="http://www.w3.org/2000/svg" 

     width="400" height="300" version="1.1">



<defs>

 <filter id="Stroke" 

            filterUnits="objectBoundingBox" 

            x="-10%" y="-10%"

	 width="150%" height="150%">

   <feMorphology in="SourceGraphic" radius="2" 

`                operator="dilate" result="dilated" />

   <feColorMatrix type="hueRotate" in="SourceGraphic" 

                  values="90" result="black" />

   <feMerge>

     <feMergeNode in="dilated" />

     <feMergeNode in="black" />

   </feMerge>

 </filter>

</defs>



<g filter="url(#Stroke)">

  <text x="0" y="80" style="font-size: 40pt; 

                           fill:#C62D13;">

         Stroke</text>

</g>



</svg>

Listing 5. stroke.svg

Figure 5. Stroke

Note that the code for stroke above uses the original color as the color of the stroke and provides a simple formula for calculating a complementary color in the inside. If this is not desirable, you can use dilate separately and simply superimpose normal text over dilated text as shown next.

Dilate

Dilate is commonly used on its own, as shown in the first line of text of Figure 7; or by superimposing another line of text on top of it. That creates the same effect as Stroke, without the restriction of a formula for colors as prescribed in Listing 5.

Figure 6. Dilate

<?xml version="1.0"?>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     width="400" height="300" version="1.1">



<defs>

 <filter id="Dilate" filterUnits="objectBoundingBox" x="-10%" y="-10%"

	 width="150%" height="150%">

   <feMorphology in="SourceGraphic" radius="2" 

                operator="dilate" result="dilated" />

 </filter>

</defs>



  <text filter="url(#Dilate)" x="0" y="80" style="font-size: 40pt; 

                              fill:#00000; ">white</text>



  <text filter="url(#Dilate)" x="0" y="110" style="font-size: 40pt; 

                              fill:#FF0000; ">stripes</text>



  <text x="0" y="110" style="font-size: 40pt; 

                              fill:#FFFFFF; ">stripes</text>





</svg>

Listing 6. dilate.svg

Bevel

A true classic:

Figure 7. Bevel

<?xml version="1.0"?>

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" version="1.1">

  <defs>

   <filter id="Bevel" filterUnits="objectBoundingBox" x="-10%" y="-10%"

  	   width="150%" height="150%">

	<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="AlphaBlur" />

	<feSpecularLighting in="AlphaBlur" surfaceScale="4" 

                            specularConstant="0.5"

  	                    specularExponent="10" result="AlphaBlurSpecular"

		            style="lighting-color:rgb(255,255,255)">

    	    <fePointLight x="-10000" y="-10000" z="20000" />

	</feSpecularLighting>

	<feComposite in="AlphaBlurSpecular"  in2="SourceAlpha" 

                        operator="in" result="output" />

	<feComposite in="SourceGraphic" in2="output" operator="arithmetic" k1="0"

			k2="1" k3="1" k4="0" result="litPaint" />

   </filter>

  </defs>



<rect x="0" y="0" width="150" height="150" style="fill:gray; stroke:black" />

<rect x="0" y="60" width="150" height="30" style="fill:white;" />

<rect x="40" y="0" width="40" height="150" style="fill:white;" />

<text filter="url(#Bevel)" 

      x="20" y="85" 

      style="font-family:Arial; font-weight:bold; font-size: 30pt; fill:Black;

	     letter-spacing:-3;">S.K.G.</text>



</svg>

Listing 7. Bevel.svg

Gradient

Unlike filters, gradients don't need to be defined inside the defs element. The syntax for gradients is pretty self-explanatory, as you can see for the case of linear gradients in Listing 8. However, if you would like the technical specification of each parameter, please refer to the the SVG Specification.

Figure 8. Gradient

<?xml version="1.0"?>

<svg xmlns="http://www.w3.org/2000/svg" 

      width="350" height="350" version="1.1">



    <linearGradient id="orangeGrad" 

        gradientUnits="userSpaceOnUse"

         x1="0" y1="0" x2="350" y2="350">

      <stop offset="0"   stop-color="#ff7b00" />

      <stop offset=".33" stop-color="#ffDF01" />

      <stop offset="1"   stop-color="#ff7b00" />

    </linearGradient>





<g style="font-family:Arial; font-weight:bold;

      font-size: 30pt; fill:url(#orangeGrad);">

<text x="20" y="85"> If you're fond of</text>

<text x="20" y="115"> sand dunes and</text>

<text x="20" y="145"> salty air</text>

</g>



</svg>

Listing 8. Gradient.svg

A little word of advice about gradients: less is more. Subtle gradients between colors close to each other in the wheel or between hues of a color usually work a lot better than rainbowesque gradients of complementary (or many) colors

Prev  [1] [2] [3] Next