Текстовый тег SVG: Скрытые заголовки страниц

Графику сайта можно улучшить в полной совместимости благодаря SVG и текстовому тегу.

Большинство браузеров сейчас распознают код SVG, а когда это не так, теги игнорируются и браузер видит только HTML-код, из-за чего страница остается функциональной, а ее содержимое полностью представлено пользователю. с классическим рендерингом.

У SVG есть четыре функции, которых не хватает CSS для рендеринга текстов:

  1. Край.
  2. Градиенты.
  3. Текстура.
  4. Эффект света.

Превратить SVG-фильтр в CSS-атрибут можно, но работать это будет только на Firefox.

Чтобы использовать SVG с опцией замены на старых браузерах, вставим код SVG в тег H1, так :

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

В старых браузерах теги <svg> и, <text> игнорируются, остается только <h1> заголовок </title>. То же самое и с поисковиками .

Текст с рамкой

Текстовый тег SVG позволяет писать текст и применять к нему свойства. Свойства fill и stroke позволяют заливать и рисовать границу.

Показ 
<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>

Использовать градиенты

Создается градиент, и атрибуты stop-color определяют границы цветовых зон. Мы могли бы добавить больше двух.

Показ 
<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>

Добавить тень

Создается фильтр, который создает тень исходного изображения и присваивает его свойству filter. Я рекомендую круглый шрифт, потому что SVG не дает хороших результатов для затемнения прямых.

Показ 
<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>

Использовать текстуру

Тег изображения позволяет загрузить изображение, которое можно использовать в качестве текстуры. Она применяется так же, как и градиент .

Показ 
<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>

Добавление эффекта освещения к текстуре

Определяется фильтр, который создает новое изображение. Атрибут feComposite позволяет объединить исходное изображение с изображением, к которому применяется фильтр .

Показ 
<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>

Добавить тень и эффект света с текстурой

На этот раз нам нужны два фильтра, но стандарт не позволяет применить несколько фильтров к одному объекту также создать уникальный фильтр, объединяющий два эффекта.
Тег feMerge содержит два узла, соответствующих эффекту затенения и световому эффекту. Текст всегда заполняется текстурой с тегом fill, а тег filter применяет к нему композитный фильтр.

Показ 
<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