[go: up one dir, main page]
Scribd
Upload
22 views3 pages

Working With Tedt, Colour, Font and Backgroung in XML

The document explains how to work with text and font in SVG, detailing the use of the <text> element for displaying text and customizing its styling through various attributes. It also covers color properties for text and shapes, including fill and stroke colors, and how to simulate a background using a <rect> element. Examples are provided to illustrate the implementation of these features in SVG.

Uploaded by

nknarula00
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
22 views3 pages

Working With Tedt, Colour, Font and Backgroung in XML

The document explains how to work with text and font in SVG, detailing the use of the <text> element for displaying text and customizing its styling through various attributes. It also covers color properties for text and shapes, including fill and stroke colors, and how to simulate a background using a <rect> element. Examples are provided to illustrate the implementation of these features in SVG.

Uploaded by

nknarula00
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Working with Text and Font

XML-based format used to describe vector graphics and allows you to directly
control text styling, fonts, and appearance. SVG provides powerful tools to style
text using simple XML tags and attributes.

1. Basic Text in SVG

To display text in SVG, the <text> element is used. You can specify text
position using the x and y attributes, and the text itself goes between the
opening and closing <text> tags.

<svg xmlns="http://www.w3.org/2000/svg" width="400"


height="200">
<text x="10" y="40">Hello, SVG!</text>
</svg>

2. Font Family and Text Styling

In SVG, you can customize the font used, the size of the text, its weight, color, and
more by using various text-related attributes.

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">

<text x="10" y="40" font-family="Arial" font-size="24" font-weight="bold"


fill="blue">

Styled SVG Text

</text>

</svg>
Color and Background Properties
1. Color Properties in SVG

You can set colors for text, fills, strokes, and more using the fill, stroke, and color
properties in SVG. The color can be specified using names, hex codes, RGB
values, and more.

1.1. Fill Color for Shapes and Text

The fill property in SVG is used to define the interior color of shapes (like
rectangles, circles, paths) and the color of the text.

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">

<rect x="10" y="10" width="100" height="100" fill="red"/>

<circle cx="150" cy="60" r="50" fill="blue"/>

<text x="10" y="150" font-family="Arial" font-size="24" fill="green">Colored


Text</text>

</svg>
1.2. Stroke Color for Shapes

The stroke property in SVG is used to set the color of the outline or border of shapes
(e.g., rectangles, circles, lines).

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">

<rect x="10" y="10" width="100" height="100" fill="yellow" stroke="black"


stroke-width="5"/>

<circle cx="150" cy="60" r="50" fill="transparent" stroke="purple" stroke-


width="3"/>

<line x1="10" y1="150" x2="200" y2="150" stroke="green" stroke-width="2"/>

</svg>

2. Background in SVG

SVG doesn't have a specific background property for the whole canvas, but you can
simulate a background by filling the entire area with a shape (usually a <rect>
element) that covers the full dimensions of the canvas.

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">

<rect width="100%" height="100%" fill="lightgray"/>

<text x="10" y="40" font-family="Arial" font-size="30" fill="black">

Text on a gray background

</text>

</svg>

You might also like