SVG text
We continue to study vector graphics, this time we will deal with the texts in SVG, which allow us to do much more than plain HTML.
Previous articles: Introduction to SVG graphics and Styling SVG graphics
')
First of all, let's consider the basic syntax, which is a text tag with coordinates x and y, which define the baseline:
This SVG-text is no different from the usual:
Text can be styled using CSS: font-weight, font-style, and text-decoration, just like plain HTML. If you need to apply a style to an individual element, you must use the tspan tag:
You can change the text orientation from normal (from left to right) to some other, for example, as in Japan, from top to bottom using the writing-mode: tb construction, where tb is “top-to-bottom”
SVG text is primarily a vector image, so using outline you can add a stroke and change the fill with fill :
In SVG, text can be displayed not only horizontally or vertically, but also along a guideline - any vector curve. The analogy can be found in a graphic editor (for example, Adobe Illustrator) using the Pen Tool:
The code must contain path and defs tags :
You also need to use the textPath to "run" the text along the guide:
You can also add a gradient to fill the text. First you need to set the colors:
And then apply the gradient with fill :
To use web-safe fonts, a fairly simple design ( demo ):
To use @ font-face, you need to declare fonts in the defs tag, then the principle of operation will be the same as in HTML ( demo ):
There are also SVG fonts (with the extension .svg, a few examples ) that can be used in two ways: by calling an external SVG font or by using the already embedded in the .svg file. This article describes in detail about these methods.
Benefits of using SVG fonts:
Using SVG text is definitely much more flexible than regular HTML. The main thing is to be able to correctly and locally apply this tool. It is worth recalling that SVG is not supported in IE 8 and below.
Show all examples / Download source
It is useful to read:
Previous articles: Introduction to SVG graphics and Styling SVG graphics
')
First of all, let's consider the basic syntax, which is a text tag with coordinates x and y, which define the baseline:
<svg> <text x="0" y="15">This is Scalable Vector Graphic (SVG) Text</text> </svg> This SVG-text is no different from the usual:
Stylization
Text can be styled using CSS: font-weight, font-style, and text-decoration, just like plain HTML. If you need to apply a style to an individual element, you must use the tspan tag:
<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> Way of writing
You can change the text orientation from normal (from left to right) to some other, for example, as in Japan, from top to bottom using the writing-mode: tb construction, where tb is “top-to-bottom”
<svg> <text x="70" y="20" style="writing-mode: tb;" class="japanese">???????</text> </svg> Text outline
SVG text is primarily a vector image, so using outline you can add a stroke and change the fill with 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> Guides
In SVG, text can be displayed not only horizontally or vertically, but also along a guideline - any vector curve. The analogy can be found in a graphic editor (for example, Adobe Illustrator) using the Pen Tool:
The code must contain path and defs tags :
<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> You also need to use the textPath to "run" the text along the guide:
<use xlink:href="#textpath"/> <text x="10" y="100"> <textPath xlink:href="#textpath"> Lorem ipsum dolor sit amet consectetur. </textPath> </text> Gradient
You can also add a gradient to fill the text. First you need to set the colors:
<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> And then apply the gradient with fill :
<text x="0" y="80" font-size="72" font-weight="bold" fill="url(#textgradient)" stroke="none">Gradient</text> Fonts
To use web-safe fonts, a fairly simple design ( demo ):
<text x="100" y="100" style="font-family: impact, georgia, times, serif; font-weight: normal; font-style: normal"> Text using web safe font </text> To use @ font-face, you need to declare fonts in the defs tag, then the principle of operation will be the same as in HTML ( demo ):
<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> There are also SVG fonts (with the extension .svg, a few examples ) that can be used in two ways: by calling an external SVG font or by using the already embedded in the .svg file. This article describes in detail about these methods.
Benefits of using SVG fonts:
- Supported by any browser or program that can view SVG files
- You can store multiple fonts in one file.
- Open source code
- Support for modern browsers
findings
Using SVG text is definitely much more flexible than regular HTML. The main thing is to be able to correctly and locally apply this tool. It is worth recalling that SVG is not supported in IE 8 and below.
Show all examples / Download source
It is useful to read:
- SVG Text Official Documentation - W3.org
- About Fonts in SVG - Divya Manian
- SVG Fonts: How To - Fr B
- Original examples at hongkiat.com
- SVG Dovumentation at Mozilla Dev. Network with Examples and Tools - MDN
- SVG Writing Mode Attribute - MDN
Source: https://habr.com/ru/post/159017/
All Articles