Part of the SVG Backgrounds Reading List

There are two kinds of watermarks regularly used in web development:

  1. Page watermarks, used to enhance brand awareness.
  2. Image and video watermarks, used to declare ownership and protect copyright.

This article shows how to create page watermarks: specifically, text (or logos) on a diagonal.

SVG Text Watermarks

I’ve previously tackled the issue of presenting multiple diagonal text elements in page backgrounds. My earlier solution used PNG images, but it’s much more effective to create a SVG with the <pattern> element I introduced last week.

A single-line example would be: 

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <defs>
        <pattern id="textstripe" patternUnits="userSpaceOnUse" width="400" height="200" patternTransform="rotate(-45)">
            <text y="30" font-family="Avenir" font-size="40">DUDLEY STOREY</text>
        </pattern>
    </defs>
<rect width="100%" height="100%" fill="url(#textstripe)" />
</svg>

I’ll discuss the <text> element in more detail in a future article; for now, note that the <pattern> area is wider than it is high, and that the text has been moved down slightly. This produces:

@dudleystorey

Adding Subtext

Introducing another line into the watermark between the previous text is achieved by adding a second pattern, with a third merging both patterns into one: 

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<style type="text/css">
    text { fill: gray; font-family: Avenir; }
</style>
    <defs>
        <pattern id="twitterhandle" patternUnits="userSpaceOnUse" width="400" height="200">
            <text y="30" font-size="40" id="name">@dudleystorey</text>
        </pattern>
        <pattern xlink:href="#twitterhandle">
            <text y="120" x="200" font-size="30" id="occupation">web developer</text>
        </pattern>
        <pattern id="combo" xlink:href="#twitterhandle" patternTransform="rotate(-45)">
              <use xlink:href="#name" />
            <use xlink:href="#occupation" />
        </pattern>
    </defs>
<rect width="100%" height="100%" fill="url(#combo)" />
</svg>

The result is the initial state of the background image you see at the top of this article.

By building up patterns in this way, it’s possible to construct complex backgrounds from basic components with relatively little effort… and the text remains completely live and editable, as you can see by using the form built into the demo.

Note that the code above has been kept clean by following a few SVG best practices:

  1. Presentation attributes have been turned into CSS, where appropriate.
  2. The second and third patterns reference the first via an xlink, inheriting the original’s patternUnits, width and height.
  3. The transform has been left for the last pattern, rather than repeating the rotation.

The demo at the top of this page makes the text dynamic; under normal circumstances, your desired watermark text (and choice of font, color, etc) would be hard-coded into the SVG, which would then be referenced as a background-image.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/PqBLjd/