Shulou(Shulou.com)06/02 Report--

This article mainly introduces the relevant knowledge of "how to use SVG in html5". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use SVG in html5" can help you solve the problem.

Let's first take a look at the advantages of SVG images:

SVG is smaller and more compressible than JPEG and GIF images.

SVG is scalable

SVG images can be printed with high quality at any resolution

SVG can be magnified without deterioration in image quality.

The text in the SVG image is optional and searchable (ideal for making maps)

SVG can be run with Java technology

SVG is an open standard

SVG files are pure XML

SVG can be read and modified by many tools (such as notepad)

A few small examples of SVG pictures:

Let's take a look at the code for the third shared icon:

Students who don't know SVG must have a question mark on their faces now, just like the first time I met them. Don't worry, let's start from the basics.

What is SVG?

SVG is an image format based on XML syntax, the full name is scalable vector graph (Scalable Vector Graphics). Other image formats are based on pixel processing, while SVG belongs to the shape description of the image, so it is essentially a text file, small in size, and undistorted no matter how many times it is magnified. In addition, SVG is the standard of the World wide Web Consortium, and SVG is integrated with W3C standards such as DOM and XSL.

How do I use it?

In HTML5, you can embed the SVG element directly into the HTML page, such as the little heart above:

The SVG code can also be written in a file that ends with .svg, and then use the

, and other tags are inserted into the web page.

CSS can also use svg

.logo {background: url (logo.svg);}

SVG files can also be converted to BASE64 encoding and then written to web pages as Data URI.

Syntax of SVG

1. Label

The SVG code is placed in the top-level tag. Here is an example.

Specifies the width and height that the SVG image occupies in the HTML element, as well as the width and height attributes of the In addition to relative units, absolute units (units: pixels) can also be used. If you do not specify these two attributes, the default size of the SVG image is 300 pixels (width) x 150 pixels (height).

If you want to show only part of the SVG image, specify the viewBox property.

The value of the property has four numbers, which are the Abscissa and ordinate of the upper-left corner, and the width and height of the viewport. In the above code, the SVG image is 100 pixels wide x 100 pixels high, and the viewBox property specifies that the viewport starts at this point (50,50). So, what you actually see is the 1/4 circle in the lower right corner.

Notice that the viewport must fit the space in which it is located. In the above code, the size of the viewport is 50 x 50, and because the size of the SVG image is 100 x 100, the viewport zooms in to fit the size of the SVG image, which is four times larger.

If you do not specify the width attribute and the height attribute, but only the viewBox attribute, it is equivalent to only the aspect ratio of a given SVG image. At this point, the default size of the SVG image will be equal to the size of the HTML element in which it is located.

two。 Label

The label represents a circle.

The above code defines three circles. The cx, cy and r attributes of the label are Abscissa, ordinate and radius, respectively, in pixels. The coordinates are relative to the origin of the upper-left corner of the canvas.

The class property is used to specify the corresponding CSS class.

.red {fill: red;} .fancy {fill: none; stroke: black; stroke-width: 3PT;}

The CSS attribute of SVG is different from that of web page elements.

Fill: fill color

Stroke: stroke color

Stroke-width: border width

3. Label

Labels are used to draw straight lines.

In the above code, the x1 and y1 attributes of the label represent the Abscissa and ordinate of the start point of the segment; the x2 and y2 attributes represent the Abscissa and ordinate of the end of the segment; and the style attribute represents the style of the segment.

4. Label

The label is used to draw a broken line.

The points property of specifies the coordinates of each endpoint, separated by a comma between Abscissa and ordinate, and between points with spaces.

5. Label

The label is used to draw a rectangle.

Specifies the Abscissa and ordinate of the endpoint of the upper-left corner of the rectangle; the width and height properties specify the width and height of the rectangle in pixels.

6. Label

The label is used to draw the ellipse.

The cx and cy properties of the ellipse specify the Abscissa and ordinate (in unit pixels) of the center of the ellipse, and the rx and ry properties specify the radius (in pixels) of the horizontal and vertical axis of the ellipse.

7. Label

Labels are used to draw polygons.

The points property of specifies the coordinates of each endpoint, separated by a comma between Abscissa and ordinate, and between points with spaces.

8. Label

The label is used to make the path.

The d attribute represents the drawing order, and its value is a long string, with each letter representing a draw action, followed by coordinates.

M: move to (moveto)

L: draw straight line to (lineto)

Z: closed path

9. Label

Labels are used to draw text.

Wanton football

Represents the Abscissa and ordinate of the start point of the baseline of the text block The style of the text can be specified with the class or style attribute.

10. Label

The label is used to copy a shape.

Specifies the node to be copied, and the x and y attributes are the coordinates of the upper-left corner. In addition, you can specify width and height coordinates.

11. Label

Tags are used to group multiple shapes into a group (group) for easy reuse.

Circle

twelve。 Label

The label is used to customize the shape, and its internal code is not displayed, only for reference.

Circle

13. Label

Tags are used to customize a shape that can be referenced to tile an area.

In the above code, the tag defines a circle as the dots pattern. The width and length represented by patternUnits= "userSpaceOnUse" are actual pixel values. Then, specify this mode to fill the lower rectangle.

14. Label

Tags are used to insert picture files.

In the above code, the xlink:href attribute indicates the source of the image.

15. Label

Tags are used to produce animated effects.

In the above code, the rectangle is constantly moving to produce an animation effect.

The meaning of the attribute is as follows

AttributeName: the name of the property in which the animation occurs.

From: the initial value of a single animation.

To: the end value of a single animation.

Dur: the duration of a single animation.

RepeatCount: the circular mode of animation.

You can define animation on multiple attributes.

16. Label

Tags have no effect on the transform attribute of CSS, so use tags if you need to deform.

In the above code, the effect is rotate, where the from and to attribute values have three numbers, the first number is the angle value, and the second and third values are the coordinates of the center of rotation. From= "0200200" means that at the beginning, the angle is 0 and rotates around (200,200); to= "360400400" means that at the end, the angle is 360 and rotates around (400,400).

JavaScript operation SVG

1. DOM operation

If the SVG code is written directly in the HTML page, it becomes part of the DOM of the page and can be manipulated directly with DOM.

After the above code is inserted into the web page, you can customize the style with CSS.

Circle {stroke-width: 5; stroke: # f00; fill: # ff0;} circle:hover {stroke: # 090; fill: # f8f8f8;}

You can then manipulate SVG with JavaScript code.

Var mycircle = document.getElementById ('mycircle'); mycircle.addEventListener (' click', function (e) {console.log ('circle clicked-enlarging'); mycircle.setAttribute (' ringing, 60);}, false)

The above code specifies that if you click on the graph, the r attribute of the circle element will be overwritten.

two。 Get SVG DOM

You can get the SVG DOM by inserting the SVG file with the, tag.

Var svgObject = document.getElementById ('object'). ContentDocument;var svgIframe = document.getElementById (' iframe'). ContentDocument;var svgEmbed = document.getElementById ('embed'). GetSVGDocument ()

Note that if you use the

If the tag is inserted into the SVG file, the SVG DOM cannot be obtained.

3. Read SVG source code

Because the SVG file is a piece of XML text, you can read the SVG source code by reading the XML code.

Use the serializeToString () method of the XMLSerializer instance to get the code for the SVG element.

Var svgString = new XMLSerializer () .serializeToString (document.querySelector ('svg'))

4. Convert SVG image to Canvas image

First, you need to create a new Image object and assign the SVG image to the src property of the Image object.

Var img = new Image (); var svg = new Blob ([svgString], {type: "image/svg+xml;charset=utf-8"}); var DOMURL = self.URL | | self.webkitURL | | self;var url = DOMURL.createObjectURL (svg); img.src = url

Then, when the image is loaded, it is drawn to the element.

Img.onload = function () {var canvas = document.getElementById ('canvas'); var ctx = canvas.getContext (' 2d'); ctx.drawImage (img, 0,0);}; that's all for "how to use SVG in html5". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.