Svg text and image, svg text image

Svg text and image, svg text image
Abstract:

Like canvas, svg can place text and images in the canvas to produce different effects. The following describes how to use svg to render text and images.

Introduction:

One of the powerful capabilities of SVG is that it can control the text to a level that is not possible for standard HTML pages, without the need to turn to images or other plug-ins. Any operations (such as painting or filter) that can be performed on the shape or path can be performed on the text. Although SVG text rendering is so powerful, there is still a disadvantage: SVG cannot execute automatic line breaks. If the text is longer than the allowed space, simply cut it off. In most cases, creating multiple lines of text requires multiple text elements.

Text:

Text mainly uses text elements. In text elements, space processing is similar to HTML: line breaks and carriage returns are converted into spaces, while multiple spaces are compressed into a single space.

<svg width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">            <rect width="300" height="100" style="fill:red;"/>            <circle cx="150" cy="100" r="80" style="fill:green;"/>            <text x="100" y="125" font-size="60" style="fill:white">SVG</text>        </svg>

 

Effect

Note: We can also see from the figure that the elements in svg are executed from top to bottom, and the latter will overwrite the former, which can be processed transparently.

Parameters:

• X and y are the starting coordinates of the text.
• Text-anchor is the direction of text display, that is, the position (x, y) is in the text position. This attribute has three values: start, middle, and end. Start indicates that the coordinates (x, y) of the text are at the beginning of the text, and the text is displayed to the right from this point. Middle indicates that (x, y) is located in the middle of the text, and the text is displayed in the left and right directions. In fact, the text is displayed in the center. End indicates that (x, y) points are at the end of the text, and the text is displayed to the left one by one.
• Fill and stroke: fill and stroke colors. We recommend that you write them in style attributes, such as fill and font.

Use tspan to emphasize the following points:

This element is a powerful complement to the text element. It is used to render text within a range. It can only appear in the text element or the child element of the tspan element. A typical usage is to emphasize displaying part of the text. For example:

<Svg width = "500" height = "500" version = "1.1" xmlns = "http://www.w3.org/2000/svg"> <text x = "100" y = "125" font-size =" 60 "style =" fill: green "> <tspan font-weight =" bold "> test </tspan> <tspan font-weight =" bold "fill =" red "> svg </tspan> </ text> </svg>

 

Effect:

Configuration parameters:

• X and y are used to set the absolute coordinate value of the included text, which overwrites the default text position. These attributes can contain a series of numbers, which are applied to each corresponding single character. The character with no corresponding settings will keep up with the previous character.
• Dx and dy are used to set the offset between the included text and the default text location. These attributes can also contain a series of numbers, each of which will be applied to the corresponding characters. The character with no corresponding settings will keep up with the previous character.
• Rotate is used to set the Rotation Angle of the font.

Image:

The image Element in SVG can be directly inserted into the image, as shown below:

<svg width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">            <image xlink:href="qq.png" x="10" y="10" height="50px" width="50px">        </svg>

 

Effect:

Note:

• If the x or y coordinates are not set, the default value is 0.
• If you explicitly set the width or height to 0, rendering of this image is prohibited.
• If width or height is not set, the default value is 0.
• The image format supports png, jpeg, jpg, svg, and so on. Therefore, svg supports nested svg.

 

 

Appendix:

SVG element:

Element	Description
A	Define hyperlink
AltGlyph	Allows the control of object texts to present special character data (such as music symbols or Asian texts)
AltGlyphDef	Define replacement of a series of symbolic symbols (such as music symbols or Asian characters)
AltGlyphItem	Define replacement of a series of candidate elephant symbols
Animate	Dynamically changing attributes over time
AnimateColor	Specifies the color conversion over time
AnimateMotion	Move elements along the action path
AnimateTransform	Dynamic attribute conversion for elements
Circle	Define circle
ClipPath
Color-profile	Required color configuration description
Cursor	Define a platform-independent cursor
Definition-src	Define a separate font Definition source
Defs	Container of referenced Element
Desc	The plain text description of the elements in SVG is not displayed as part of the image. The User Agent displays it as a Tool prompt.
Ellipse	Define an ellipse
FeBlend	SVG filter. Combine two objects in different hybrid modes.
FeColorMatrix	SVG filter. Apply matrix conversion.
FeComponentTransfer	SVG filter. Execute the component-wise re- ing of data.
FeComposite	SVG filter.
FeConvolveMatrix	SVG filter.
FeDiffuseLighting	SVG filter.
FeDisplacementMap	SVG filter.
FeDistantLight	SVG filter. Defines a light source
FeFlood	SVG filter.
FeFuncA	SVG filter. The child element of feComponentTransfer.
FeFuncB	SVG filter. The child element of feComponentTransfer.
FeFuncG	SVG filter. The child element of feComponentTransfer.
FeFuncR	SVG filter. The child element of feComponentTransfer.
FeGaussianBlur	SVG filter. Perform Gaussian blur on the image.
FeImage	SVG filter.
FeMerge	SVG filter. Create a cumulative image.
FeMergeNode	SVG filter. The child element of feMerge.
FeMorphology	SVG filter. Execute "fattening" or "thinning" on the source image ".
FeOffset	SVG filter. Move the image relative to the current position of the image.
FePointLight	SVG filter.
FeSpecularLighting	SVG filter.
FeSpotLight	SVG filter.
FeTile	SVG filter.
FeTurbulence	SVG filter.
Filter	Filter effect container.
Font	Define the font.
Font-face	Describes the characteristics of a font.
Font-face-format
Font-face-name
Font-face-src
Font-face-uri
ForeignObject
G	Container elements used to combine related elements.
Glyph	Defines a graph for a given pictogram.
GlyphRef	Define the possible pictograms to be used.
Hkern
Image
Line	Define a line.
LinearGradient	Defines a linear gradient.
Marker
Mask
Metadata	Required metadata.
Missing-glyph
Mpath
Path	Define the path.
Pattern
Polygon	Defines a closed shape composed of a series of connected straight lines.
Polyline	Define a series of connected straight lines.
RadialGradient	Define the gradient of the radiation.
Rect	Defines the rectangle.
Script	Script container. (For example, ECMAScript)
Set	Set the value for the attribute of the specified duration
Stop
Style	The style sheet can be directly embedded inside the SVG content.
Svg	Defines SVG document fragments.
Switch
Symbol
Text
TextPath
Title	The plain text description of the elements in SVG is not displayed as part of the image. The User Agent displays it as a Tool prompt.
Tref
Tspan
Use
View
Vkern