• Facebook
  • Linkedin
Lesson 1 - Text in SVG ... - NAHID HOSSAIN
Profile
Nahid

NAHID HOSSAIN

Web Application & Software Developer

  • Blog
  • Uncategorized/

2016.03.23

Uncategorized
0

Lesson 1 – Text in SVG …

Websites with lots of pictures are slow. If your website takes more than a few seconds, you will lose your visitors. Who wants to wait in this age of Internet? We want everything instantly.

The good news is that you can redefine your site’s performance using SVG images. Read this blog post to get a basic idea about the SVG image format: An introduction to SVG format.

Your first SVG code

The <svg> element is used to define an SVG image. The “height” and “width” attributes define the height and width of the SVG images.

Example:

<!doctype html>
<html>
    <head></head>
    <body>
        <svg height="40" width="300">
            <text x="0" y="20">Hello</text>
        </svg>
    </body>
</html>

Output

Hello

The <text> element

The <text> element defines a text. You can customize the text using the attributes of the <text> element. The following example defines the text “Hello”.

Example:

<svg height="40" width="300">
    <text x="0" y="20">Hello</text>
</svg>

Output

Hello

Positioning the text

Use the “x” and “y” attributes of the <text> element to set the SVG image on a particular position of the screen.

Example:

<svg height="300" width="300">
    <text x="200" y="200">Hello</text>
</svg>

Output:

Hello

Styling the text

You can style the text in two ways – using CSS and using attributes.

The below example shows how to style a text using CSS.

Example:

<svg height="200" width="300">
    <text x="0" y="100" fill="blue" font-size="30px">Hello</text>
</svg>

Output:

Hello

The below example shows how to style a text using attributes.

Example:

<svg height="200" width="300">
    <text x="0" y="100" fill="blue" font-size="30px">Hello</text>
</svg>

Output:

Hello

Sub-portions of a <text> element

You can divide a <text> element into multiple sub-portions using the <tspan> element. This kind of arrangement of text will be useful when you will want to set different attribute values for different sub-portions of the text.

Each <tspan> element is a sub-portion or child of the <text> element.

Example:

<svg height="100" width="300">
    <text x="0" y="30" font-weight="bold">Games:
        <tspan x="12" y="55" font-weight="normal">Cricket.</tspan>
        <tspan x="12" y="75" font-weight="normal">Football.</tspan>
    </text>
</svg>

Output:

Games: Cricket. Football.

Making rotations

The “transform” attribute of the <text> element lets you rotate a text using the “rotate” transform definition.

Example:

<svg height="100" width="300">
    <text x="50" y="50" fill="green" font-size="30px" transform="rotate(40 10,70)">Hello</text>
</svg>

Output:

Hello

This lesson explained the basics concepts of text in SVG. In the next lesson, you will learn about drawing shapes.

[categories orderby=count]
By NAHID HOSSAIN
Share this Story:
  • Twitter
  • Facebook
  • Google+

Comments(0)

LEAVE A COMMENT Cancel reply

Your email address will not be published. Required fields are marked *

Comment

Categories

  • Countries
    • Bangladesh
  • Entertainment
  • International
  • Miscellaneous
  • Review
  • Science & Technology
    • Coding & Scripting
      • HTML5
    • Computer Networks
    • Information Technology
      • Internet
    • Invention
    • Mobile Phone
  • Uncategorized

Recent Posts

  • Lesson 2: Drawing shapes in SVG …
    March 28, 2016akmnahid
  • An introduction to SVG format: its benef …
    March 15, 2016akmnahid
  • How to speed up the web development process …
    March 14, 2016akmnahid
  • Parsue Your Career in Information Technlogoy …
    October 8, 2015akmnahid
  • Prevent Selecting Text using CSS …
    May 29, 2015akmnahid

Recent Comments

  • akmnahid on Lesson 2: Drawing shapes in SVG …: “How terrible that is. When bsf will stop their that kind of cruel mission?’” Feb 17, 05:04
  • akmnahid on Lesson 2: Drawing shapes in SVG …: “India never become friend of bangladesh 1971 they help us for self security reason” Feb 9, 05:46
  • akmnahid on An introduction to SVG format: its benef …: “new comment” Feb 8, 11:07
© 2021 www.akmnahid.com All Rights Reserved