Creating Responsive Hero Text with SVG

While responsive text can be built using vw units, the current lack of max and min font-size properties in CSS means that any attempt to do so must be accompanied by a set of media queries to control display of the text at widescreen and mobile viewport widths. This forces vw text to settle somewhat uncomfortably between two extremes, clamped with @media queries.

While SVG has many limitations when it comes to text, it is perfect for “hero” banner elements. There are several ways to create these on web pages:

Inline SVG Text

The best method for adding a title to a page in SVG is to make the SVG part of the page itself:

<header>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285 80">
        <text x="0" y="66">Kauai</text>
    </svg>
</header>

The CSS:

header { 
  width: 80%;
  margin: 0 auto;
}
svg text { 
  font-family: sans-serif;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 90px;
   fill: blue;
}

The SVG should automatically scale itself to its container: you’ll likely need to adjust the viewBox, font-size and x values to have your text positioned across the SVG correctly. (Temporarily placing a border or background-color on the SVG can help in determining the rendered size of the element).

Due to the fact that it’s inline, this approach has several advantages:

The SVG can use any font embedded on the page, or from the site stylesheet.
The text is immediately searchable, editable, copyable and accessible: it registers and is read on the page just like any other text.

You can take things much further in terms of visual effects, while keeping the text editable, as shown in the example at the top of this article.

SVG Text as linked image

You can keep also the same SVG code in its own file, and reference it as an image from an HTML document:

<header>
    <img src="waves.svg" alt="Waves"> 
</header>

Making the image fluid would make the element responsive. There are a few considerations, however:

The linked SVG can’t reliably use an embedded font.
The text used is searchable, but only in the context of the SVG itself; it is not copyable from the web page.
The text is not accessible, although the alt attribute compensates for this.

Broken-Up SVG Text

There may be situations in which the SVG text can’t be retained as text, and must instead be broken apart (in Adobe Illustrator: Type / Create Outlines) and exported as SVG paths. A good example:

This removes any need for embedded fonts, but also eliminates the possibility of easily editing the SVG. It also removes SEO and accessibility, unless the following steps are taken:

If the SVG is referenced as an image, adding an alt attribute to the tag.
If using the SVG inline, adding a <title> element.

Photograph by Daniel Ramirez, licensed under Creative Commons

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/rxJwZY