SVG image
Overview
SVG is an image format based on XML grammar, its full name is Scalable Vector Graphics. Other image formats are based on pixel processing. SVG is a description of the shape of an image, so it is essentially a text file with a small volume and no distortion regardless of how many times it is enlarged.
SVG files can be directly inserted into web pages and become part of the DOM, and then manipulated with JavaScript and CSS.
<!DOCTYPE html>
<html>
<head></head>
<body>
<svg
id="mysvg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 800 600"
preserveAspectRatio="xMidYMid meet"
>
<circle id="mycircle" cx="400" cy="300" r="50" />
</svg>
</body>
</html>
The above is an example of inserting SVG code directly into a web page.
The SVG code can also be written in a separate file, and then inserted into the web page with tags such as <img>
, <object>
, <embed>
, and <iframe>
.
<img src="circle.svg" />
<object id="object" data="circle.svg" type="image/svg+xml"></object>
<embed id="embed" src="icon.svg" type="image/svg+xml" />
<iframe id="iframe" src="icon.svg"></iframe>
CSS can also use SVG files.
.logo {
background: url(icon.svg);
}
SVG files can also be converted to BASE64 encoding, and then written into web pages as Data URI.
<img src="data:image/svg+xml;base64,[data]" />
Syntax
<svg>
tag
The SVG code is placed in the top-level tag <svg>
. Below is an example.
<svg width="100%" height="100%">
<circle id="mycircle" cx="50" cy="50" r="50" />
</svg>
The width
attribute and the height
attribute of <svg>
specify the width and height of the SVG image in the HTML element. In addition to relative units, absolute units (units: pixels) can also be used. If you do not specify these two attributes, the size of the SVG image defaults to 300 pixels (width) x 150 pixels (height).
If you only want to display a part of the SVG image, you must specify the viewBox
attribute.
<svg width="100" height="100" viewBox="50 50 50 50">
<circle id="mycircle" cx="50" cy="50" r="50" />
</svg>
The value of the <viewBox>
attribute 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
attribute specifies that the viewport starts from the point (50, 50)
. So, what you actually see is the quarter circle in the lower right corner.
Note that the viewport must fit in the space. In the above code, the size of the viewport is 50 x 50. Since the size of the SVG image is 100 x 100, the viewport will be enlarged to fit the size of the SVG image, which is four times larger.
If you do not specify the width
property and the height
property, and only specify the viewBox
property, it is equivalent to only specifying the aspect ratio of the SVG image. At this time, the default size of the SVG image is the size of the HTML element where it is located.
<circle>
tag
The <circle>
tag represents a circle.
<svg width="300" height="180">
<circle cx="30" cy="50" r="25" />
<circle cx="90" cy="50" r="25" class="red" />
<circle cx="150" cy="50" r="25" class="fancy" />
</svg>
The above code defines three circles. The cx
, cy
, and r
attributes of the <circle>
tag are the abscissa, ordinate, and radius, respectively, in pixels. The coordinates are all relative to the origin of the upper left corner of the <svg>
canvas.
The class
attribute is used to specify the corresponding CSS class.
.red {
fill: red;
}
.fancy {
fill: none;
stroke: black;
stroke-width: 3pt;
}
The CSS properties of SVG are different from web page elements.
- fill: fill color
- stroke: stroke color
- stroke-width: border width
<line>
tag
The <line>
tag is used to draw straight lines.
<svg width="300" height="180">
<line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width:5" />
</svg>
In the above code, the x1
attribute and y1
attribute of the <line>
tag indicate the abscissa and ordinate of the starting point of the line segment; the x2
attribute and y2
attribute indicate the abscissa and ordinate of the end point of the line segment ; The style
attribute indicates the style of the line segment.
<polyline>
tag
The <polyline>
tag is used to draw a polyline.
<svg width="300" height="180">
<polyline points="3,3 30,28 3,53" fill="none" stroke="black" />
</svg>
The points
property of <polyline>
specifies the coordinates of each end point. The abscissa and ordinate are separated by commas, and the points are separated by spaces.
<rect>
tag
The <rect>
tag is used to draw rectangles.
<svg width="300" height="180">
<rect x="0" y="0" height="100" width="200" style="stroke: #70d5dd; fill: #dd524b" />
</svg>
The x
and y
attributes of <rect>
specify the abscissa and ordinate of the upper left corner of the rectangle; the width
and height
attributes specify the width and height (in pixels) of the rectangle.
<ellipse>
tag
The <ellipse>
tag is used to draw an ellipse.
<svg width="300" height="180">
<ellipse cx="60" cy="60" ry="40" rx="20" stroke="black" stroke-width="5" fill="silver"/>
</svg>
The cx
and cy
attributes of <ellipse>
specify the abscissa and ordinate (unit pixel) of the center of the ellipse; the rx
and ry
attributes specify the horizontal and vertical axes of the ellipse Radius (in pixels).
<polygon>
tag
The <polygon>
tag is used to draw polygons.
<svg width="300" height="180">
<polygon fill="green" stroke="orange" stroke-width="1" points="0,0 100,0 100,100 0,100 0,0"/>
</svg>
The points
attribute of <polygon>
specifies the coordinates of each end point. The abscissa and ordinate are separated by commas, and the points are separated by spaces.
<path>
tag
The <path>
tag is used to make paths.
<svg width="300" height="180">
<path d="
M 18,3
L 46,3
L 46,40
L 61,40
L 32,68
L 3,40
L 18,40
WITH
"></path>
</svg>
The d
attribute of <path>
represents the drawing order, and its value is a long string. Each letter represents a drawing action, followed by coordinates.
- M: move to (moveto)
- L: draw a straight line to (lineto)
- Z: closed path
<text>
tag
The <text>
tag is used to draw text.
<svg width="300" height="180">
<text x="50" y="25">Hello World</text>
</svg>
The x
and y
attributes of <text>
indicate the abscissa and ordinate of the starting point of the baseline of the text block. The style of the text can be specified with the class
or style
attribute.
<use>
tag
The <use>
tag is used to copy a shape.
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="5" cy="5" r="4"/>
<use href="#myCircle" x="10" y="0" fill="blue" />
<use href="#myCircle" x="20" y="0" fill="white" stroke="blue" />
</svg>
The href
attribute of <use>
specifies the node to be copied, and the x
attribute and y
attribute are the coordinates of the upper left corner of <use>
. In addition, you can also specify the width
and height
coordinates.
<g>
tag
The <g>
tag is used to group multiple shapes into a group for easy reuse.
<svg width="300" height="100">
<g id="myCircle">
<text x="25" y="20">圆形</text>
<circle cx="50" cy="50" r="20"/>
</g>
<use href="#myCircle" x="100" y="0" fill="blue" />
<use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>
<defs>
tag
The <defs>
tag is used to customize the shape, the code inside it will not be displayed, it is for reference only.
<svg width="300" height="100">
<defs>
<g id="myCircle">
<text x="25" y="20">圆形</text>
<circle cx="50" cy="50" r="20"/>
</g>
</defs>
<use href="#myCircle" x="0" y="0" />
<use href="#myCircle" x="100" y="0" fill="blue" />
<use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>
<pattern>
tag
The <pattern>
tag is used to customize a shape that can be referenced to tile an area.
<svg width="500" height="500">
<defs>
<pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
<circle fill="#bee9e8" cx="50" cy="50" r="35" />
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />
</svg>
In the above code, the <pattern>
tag defines a circle as a dots
pattern. patternUnits="userSpaceOnUse"
means that the width and length of <pattern>
are actual pixel values. Then, specify this mode to fill the rectangle below.
<image>
tag
The <image>
tag is used to insert image files.
<svg viewBox="0 0 100 100" width="100" height="100">
<image xlink:href="path/to/image.jpg"
width="50%" height="50%"/>
</svg>
In the above code, the xlink:href
attribute of <image>
indicates the source of the image.
<animate>
tag
The <animate>
tag is used to produce animation effects.
<svg width="500px" height="500px">
<rect x="0" y="0" width="100" height="100" fill="#feac5e">
<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
</rect>
</svg>
In the above code, the rectangle will move continuously to produce an animation effect.
The meaning of the attributes of <animate>
is as follows.
- attributeName: The attribute name of the animation effect.
- 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 loop mode of the animation.
Animation can be defined on multiple properties.
<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
<animate attributeName="width" to="500" dur="2s" repeatCount="indefinite" />
<animateTransform>
tag
The <animate>
tag has no effect on the transform
property of CSS. If you need to transform it, you must use the <animateTransform>
tag.
<svg width="500px" height="500px">
<rect x="250" y="250" width="50" height="50" fill="#4bc0c8">
<animateTransform attributeName="transform" type="rotate" begin="0s" dur="10s" from="0 200 200" to="360 400 400" repeatCount="indefinite" />
</rect>
</svg>
In the above code, the effect of <animateTransform>
is rotation (rotate
). At this time, the attribute values of from
and to
have three numbers, the first number is the angle value, the second value and the third The value is the coordinate of the center of rotation. from="0 200 200"
means at the beginning, the angle is 0, and starts to rotate around (200, 200)
; to="360 400 400"
means at the end, the angle is 360, around (400, 400)
Rotate.
JavaScript operation
DOM manipulation
If the SVG code is written directly in the HTML page, it becomes a part of the DOM of the page and can be manipulated directly with the DOM.
<svg
id="mysvg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 800 600"
preserveAspectRatio="xMidYMid meet"
>
<circle id="mycircle" cx="400" cy="300" r="50" />
<svg></svg>
</svg>
After the above code is inserted into the web page, you can use CSS to customize the style.
circle {
stroke-width: 5;
stroke: #f00;
fill: #ff0;
}
circle:hover {
stroke: #090;
fill: #fff;
}
Then, you can manipulate the SVG with JavaScript code.
var mycircle = document.getElementById("mycircle");
mycircle.addEventListener(
"click",
function (e) {
console.log("circle clicked - enlarging");
mycircle.setAttribute("r", 60);
},
false
);
The above code specifies that if the graphic is clicked, the r
attribute of the circle
element will be overwritten.
Get SVG DOM
Use the <object>
, <iframe>
, <embed>
tags to insert the SVG file to get the SVG DOM.
var svgObject = document.getElementById("object").contentDocument;
var svgIframe = document.getElementById("iframe").contentDocument;
var svgEmbed = document.getElementById("embed").getSVGDocument();
Note that if you use the <img>
tag to insert an SVG file, you cannot get the SVG DOM.
Read SVG source code
Since the SVG file is just a piece of XML text, you can read the SVG source code by reading the XML code.
<div id="svg-container">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xml:space="preserve"
width="500"
height="440"
>
<!-- svg code -->
</svg>
</div>
Use the serializeToString()
method of the XMLSerializer
instance to get the code of the SVG element.
var svgString = new XMLSerializer().serializeToString(
document.querySelector("svg")
);
Convert SVG image to Canvas image
First, you need to create a new Image
object and assign the SVG image to the src
attribute 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, draw it to the <canvas>
element.
img.onload = function () {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
};
Example: Line chart
Next, draw a data table into a line graph.
Date |Amount -----|------ 2014-01-01 | $10 2014-02-01 | $20 2014-03-01 | $40
2014-04-01 | $80
The above graph can be drawn as a coordinate system, with Date
as the horizontal axis, Amount
as the vertical axis, and four rows of data as one data point.
<svg width="350" height="160">
<g class="layer" transform="translate(60,10)">
<circle r="5" cx="0" cy="105" />
<circle r="5" cx="90" cy="90" />
<circle r="5" cx="180" cy="60" />
<circle r="5" cx="270" cy="0" />
<g class="y axis">
<line x1="0" y1="0" x2="0" y2="120" />
<text x="-40" y="105" dy="5">$10</text>
<text x="-40" y="0" dy="5">$80</text>
</g>
<g class="x axis" transform="translate(0, 120)">
<line x1="0" y1="0" x2="270" y2="0" />
<text x="-30" y="20">January 2014</text>
<text x="240" y="20">April</text>
</g>
</g>
</svg>
Reference link
- Jon McPartland, An introduction to SVG animation
- Alexander Goedde, SVG - Super Vector Graphics
- Joseph Wegner, Learning SVG
- biovisualize, Direct svg to canvas to png conversion
- Tyler Sticka, Cropping Image Thumbnails with SVG
- Adi Purdila, How to Create a Loader Icon With SVG Animations