Пользователь
0,0
рейтинг
17 ноября 2012 в 08:30

Дизайн → Текст в SVG tutorial

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

image

Предыдущие статьи: Знакомство с SVG-графикой и Стилизация SVG-графики

Прежде всего рассмотрим основной синтаксис, который представляет собой тег text c координатам x и y, определяющими baseline:

<svg>  
<text x="0" y="15">This is Scalable Vector Graphic (SVG) Text</text>  
</svg> 




Такой SVG-текст ничем не отличается от обычного:



Стилизация


Текст может быть стилизован с помощью CSS: font-weight, font-style, и text-decoration, как и обычный HTML. Если необходимо применить стиль к отдельному элементу, то необходимо использовать тег tspan:

<svg> 
<text x="0" y="15"><tspan style="font-weight: bold;">This is bold</tspan>, <tspan style="font-style: italic;">this is italic</tspan> and <tspan style="text-decoration: underline;">this is underline</tspan></text> 
</svg> 




Способ написания


Можно изменять ориентацию текста с обычной (слева направо) на какую-то другую, например как в Японии, сверху вниз с помощью конструкции writing-mode: tb, где tb — это «top-to-bottom»

<svg> 
<text x="70" y="20" style="writing-mode: tb;" class="japanese">???????</text> 
</svg> 




Контур текста


SVG-текст — это в первую очередь векторное изображение, поэтому с помощью outline можно добавить обводку и изменить заливку с помощью fill:

<svg>  
<text x="0" y="50px" font-size="50px" font-weight="bold" stroke="black" stroke-width="0.5" fill="none">This is SVG Text</text>  
</svg> 




Направляющие


В SVG текст можно отображать не только горизонтально или вертикально, но и по направляющей — любой векторной кривой. Аналогию можно найти в графическом редакторе (например Adobe Illustrator), используя инструмент Pen Tool:



В коде должны быть теги path и defs:

<defs>  
<path id="textpath" fill="none" stroke="#000000" d="M0.057,0.024c0,0,10.99,51.603,102.248,51.603c91.259,0,136.172,53.992,136.172,53.992"/>  
</defs>


Также необходимо с помощью textPath «запустить» текст по направляющей:

<use xlink:href="#textpath"/>  
<text x="10" y="100">  
<textPath xlink:href="#textpath">  
Lorem ipsum dolor sit amet consectetur.  
</textPath>  
</text>




Градиент


Также можно добавить градиент для заливки текста. Сначала необходимо задать цвета:

<defs>  
<linearGradient id="textgradient" x1="0%" x2="0%" y1="0%" y2="100%">  
    <stop stop-color="#999" offset="0%"/>  
    <stop stop-color="#111" offset="100%"/>  
</linearGradient>  
</defs>  


А затем применить градиент с помощью fill:

<text x="0" y="80" font-size="72" font-weight="bold" fill="url(#textgradient)" stroke="none">Gradient</text>  




Шрифты


Чтобы использовать web-safe шрифты, достаточно простой конструкции (демо):

<text x="100" y="100" style="font-family: impact, georgia, times, serif; font-weight: normal; font-style: normal">
    Text using web safe font
</text>    


Для использования @font-face необходимо объявить шрифты в теге defs, тогда принцип работы будет такой же, как в HTML (демо):

<defs>
  <style type="text/css">
   <![CDATA[
    @font-face {
        font-family: Delicious;
        src: url('http://nimbupani.com/demo/svgfonts/delicious-roman.otf');
    }
   ]]>
 </style>
</defs>
<text x="100" y="100" style="font-family: 'Delicious'; font-weight:normal; font-style: normal">
 Text using CSS @font-face
</text> 


Также существуют SVG-шрифты (с расширением .svg, несколько примеров),  которые можно использовать двумя способами: вызывая внешний SVG-шрифт либо используя уже встроенный в .svg-файл. В этой статье подробно рассказано об этих способах.

Преимущества использования SVG-шрифтов:
  • Поддерживается любым браузером или программой, которые умеют просматривать SVG-файлы
  • Можно хранить несколько шрифтов в одном файле
  • Открытый код
  • Поддержка современными браузерами


Выводы


Использование SVG-текста, безусловно, намного более гибко, чем обычный HTML. Главное — уметь правильно и к месту применять этот инструмент. Стоит напомнить, что SVG не поддерживается в IE 8 и ниже.

Демонстрация всех примеров / Скачать исходники

Полезно почитать:
@grokru
карма
406,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Дизайн

Комментарии (17)

  • +1
    Если бы не ie8, уже можно было бы пользоваться.
    • +1
      Не уверен конечно, нужно попробовать, но VML вроде бы умеет ровно тоже самое, так что написать небольшой фэлбэк не составляет такой уж большой проблемы. Более того, такие уже есть.
      • 0
        Есть то они есть, но ИЕ8 и без этих оберток весьма задумчив. Чего-то сложное на таком лучше не делать.
        Хотя по лирушной статистике доля ие8 уже меньше 5%, так что не так долго осталось ждать.
        • 0
          Такая обертка задумчивости IE не прибавит. Во всяком случае графики через него рисовать очень даже удобно и быстро выходит.

          По поводу доли IE на рынке браузеров, то тут все зависит от сегмента. Скажем в корпоративном сегменте IE8 еще очень и очень популярен. Даже IE7 занимает там достойное положение. Это очень огорчает меня, как разработчика, так как большая часть проектов у меня нацелено именно на этот сегмент.
          • +1
            Raphael.JS (http://raphaeljs.com/) — очень удобная либа именно для этого. На динамическом рисовании графиков или текста тормозов нет, тупит именно на сложных векторных картинах. Бонусом — поддержка всех IE от 6
            • 0
              Им и пользуюсь.
  • +1
    Такой SVG-текст ничем не отличается от обычного


    Да нет, отличается. Одно слово — «переносы». Это вопрос такой важности, что его просто нельзя было обойти в обзоре.

    Использование SVG-текста, безусловно, намного более гибко, чем обычный HTML.


    См. выше. Чтобы получить в SVG многострочный текст, надо внедрять HTML-текст через foreignObject.
  • +1
    Исключительно для оформления, господа. Заголовки, статика. Для остального есть HTML и CSS.
  • 0
    SVG-текст — это в первую очередь векторное изображение, поэтому с помощью outline можно добавить обводку и изменить заливку с помощью fill:
    Не увидел в примере outline. В спецификации «outline» не имеет специального смысла вроде ключевого слова, это просто «обрисовка».

    Почему не приведены недостатки, и довольно существенные, SVG-шрифтов?
    • Поддерживаются далеко не во всех браузерах.
    • Нет хинтинга.
    • Нет кернинга и других плюшек шрифтов.
    • Нельзя установить даже базовую линию!

    По сути это всего лишь контуры букв, и не более того. Потому от их внедрения отказались в пользу CSS-шрифтов, объявляемых через @font-face.
    • 0
      @font-face никак не противоречит SVG-шрифтам.
  • 0
    А поисковики такой «текст» воспринимают?
    • 0
      Да.
  • +1
    Пользователь такой текст может скопипастить, а вот бот какого-нибудь спамера не полезет в картинку. Хороший способ защищать свой e-mail от ботов ;)
  • +1
    Вот такое текстовое сообщение висело на главное странице Apple некоторое время назад.

    image

    Это svg-изображение объемом — 458Кб!

    Даже не знаю, оправдано ли использование svg в этом случае?
    • 0
      Apple очень своеобразно подходит к SVG. Судя по всему здесь был просто сохранён векторизованный текст из Адоуби Иллюстратора. Даже gzip не включили, а только он позволяет сжать до 61 КиБ. А если ещё немного оптимизировать, то можно даже до 40 КиБ в гзипе. Думаю, это не предел, просто то, чего можно добиться небольшими усилиями.
  • 0
    есть два слоя с непрозрачными бекграундами, один под другим. на верхнем слое какой-то текст. как сделать этот текст прозрачным — т.е. чтобы нижний слой просвечивал через буквы?
  • 0
    Интересный материал, только почему статья не в разделе Векторная графика?

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