SVG Text Tag: Hidden Page Headers

The graphics of the site can be improved in full compatibility thanks to SVG and text tag.

Most browsers now recognize SVG code, and when this is not the case, tags are ignored and the browser sees only HTML code, which leaves the page functional and its contents fully presented to the user. with classic rendering.

SVG has four features that CSS lacks for text rendering:

  1. Edge.
  2. Gradients.
  3. Texture.
  4. Effect of light.

You can turn an SVG filter into a CSS attribute, but it will only work on Firefox.

To use SVG with the replace option on older browsers, insert the SVG code into the H1 tag, like this:

<h1>
  <svg><text>... Titre ...</text></svg>
</h1>

In older browsers, the <svg> and, <text> tags are ignored, leaving only the <h1> title </title>. The same goes for search engines.

Text with border

The SVG text tag allows you to write text and apply properties to it. The fill and stroke properties allow you to fill and draw a boundary .

Display 
<svg width="100%" height="64px">
  <text font-size="64" fill="#bbccee" stroke="#003366" stroke-width="1px" 
           x="0" y="48" font-family="Arial">
    Démonstration
  </text>
</svg>

Use gradients

A gradient is created and the stop-color attributes define the boundaries of the color zones. We could add more than two .

Display 
<svg width="100%" height="64px">
  <linearGradient id="shaded" x1="0" x2="0" y1="0" y2="1">
    <stop offset="0%" stop-color="#bbccee" stop-opacity="0"/>
    <stop offset="80%" stop-color="#6699cc"/>
  </linearGradient>
  <text font-size="64" fill="url(#shaded)" stroke="#000" stroke-width="1px" x="0" y="48px"
     font-family="Arial">
    Démonstration
  </text>
</svg>

Add Shadow

A filter is created that shadows the original image and assigns it to the filter property. I recommend round type because SVG does not give good results for darkening lines.

Display 
<svg  width="100%" height="64px">
  <defs>
    <filter id="drop-shadow" filterUnits="userSpaceOnUse" width="100%" height="92">
      <feGaussianBlur in="SourceAlpha" result="blur-out" stdDeviation="3" />
      <feOffset in="blur-out" result="shadowoffset" dx="2" dy="2"/>
      <feBlend in="SourceGraphic" in2="shadowoffset" mode="normal"/>
    </filter>
  </defs>
  <linearGradient id="shaded" x1="0" x2="0" y1="0" y2="1">
    <stop offset="0%" stop-color="#bbccee" stop-opacity="0"/>
    <stop offset="70%" stop-color="#6699cc"/>
  </linearGradient>
  <text font-size="64" fill="url(#shaded)" stroke="#336" stroke-width="1px" 
      filter="url(#drop-shadow)" x="0" y="48px"  font-family="Arial">
    Démonstration
  </text>
</svg>

Use Texture

The image tag allows you to load an image that can be used as a texture. It is applied in the same way as a gradient.

Display 
<svg height="64px" width="480px">
 <pattern id="pattern1" patternUnits="userSpaceOnUse" viewBox="0 0 184 162" width="184" height="162">
   <image xlink:href="texture.jpg" width="184" height="162"/>
  </pattern>
  <text x="0" y="48" font-size="64" fill="url(#pattern1)" stroke="#000" stroke-width="1px"
           font-family="Arial">
    Démonstration
  </text>
</svg>

Add a lighting effect to a texture

Specifies the filter that creates the new image. The feComposite attribute allows you to combine the source image with the image to which the filter is applied.

Display 
<svg height="64px" width="480px">
  <defs>
  <filter id="lighting">
    <feGaussianBlur in="SourceAlpha" stdDeviation = "1" result = "blur1"/>
    <feSpecularLighting result="specOut" in="blur1" specularExponent="20" lighting-color="#fff">
      <fePointLight x="-200" y="30" z="150"/>
    </feSpecularLighting>
    <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
  </filter>
 </defs>
 <pattern id="pattern1" patternUnits="userSpaceOnUse" viewBox="0 0 184 162" width="184" height="162">
  <image xlink:href="texture.jpg" width="184" height="162"/>
 </pattern>
 <text filter="url(#lighting)" x="0" y="48" fill="url(#pattern1)" stroke="#000" stroke-width="1px"
           font-size="64px" font-family="Arial">
    Démonstration
 </text>
</svg>

Add Shadow and Texture Light Effect

This time we need two filters, but the standard does not allow you to apply multiple filters to one object and also create a unique filter that combines the two effects.
The feMerge tag contains two nodes corresponding to the shading effect and the lighting effect. The text is always filled with a texture with a fill tag, and the filter tag applies a composite filter to it .

Display 
<svg height="64px" width="480px">
 <defs>
   <filter id="shadelight">
      <feGaussianBlur in="SourceAlpha" stdDeviation = "1" result = "lightblur"/>
      <feSpecularLighting result="specOut" in="lightblur" specularExponent="20" lighting-color="#fff">
          <fePointLight x="-200" y="30" z="150"/>
      </feSpecularLighting>
      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"
                             result="lighted" />
      <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blurred" />
      <feOffset in="blurred" result="shadowoffset" dx="3" dy="3"/>
      <feMerge>
        <feMergeNode in="shadowoffset"/>
        <feMergeNode in="lighted"/>
       </feMerge>
    </filter>
  </defs>
  <pattern id="pattern1" patternUnits="userSpaceOnUse" viewBox="0 0 184 162" width="184" height="162">
    <image xlink:href="texture.jpg" width="184" height="162"/>
  </pattern>
  <text filter="url(#shadelight)" x="0" y="48" fill="url(#pattern1)" stroke="#221" stroke-width="1px"
           font-size="64" font-family="Arial">
    Démonstration
  </text>
</svg>

SVG vs Canvas