SVG is an image format based on XML syntax, the full name is Scalable Vector Graphics. Other image formats are based on pixel processing, and SVG is a shape description of an image, so it is essentially a text file, small in size, and will not be distorted no matter how many times it is enlarged.
SVG files can be inserted directly into web pages, 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 SVG code inserted directly into a web page.
SVG code can also be written in a separate file and inserted into web pages using tags like <img>, <object>, <embed>, <iframe>, etc.
<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 written to web pages as Data URIs.
<img src="data:image/svg+xml;base64,[data]">
grammar
<svg> tag
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 and height attributes of <svg> specify the width and height occupied by the SVG image in the HTML element. In addition to relative units, absolute units (unit: pixels) can also be used. If neither of these attributes are specified, the size of the SVG image defaults to 300 pixels (width) x 150 pixels (height).
If you only want to display part of the SVG image, 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> property has four numbers, which are the abscissa and ordinate of the upper left corner, the width and height of the viewport. In the code above, the SVG image is 100 pixels wide x 100 pixels high, and the viewBox attribute specifies that the viewport starts at (50, 50). So, what is actually seen is the quarter circle in the lower right corner.
Note that the viewport must fit in the space it is in. 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 attribute and height attribute, and only specify the viewBox attribute, it is equivalent to only specifying the aspect ratio of the SVG image. In this case, the size of the SVG image defaults to the size of the HTML element it contains.
<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;
}
SVG’s CSS properties differ 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 and y1 attributes of the <line> tag represent the abscissa and ordinate of the starting point of the line segment; the x2 and y2 attributes represent 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 attribute of <polyline> specifies the coordinates of each endpoint. 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 (unit 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 attribute and cy attribute of <ellipse> specify the abscissa and ordinate (unit pixel) of the center of the ellipse; the rx attribute and ry attribute 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 property of <polygon> specifies the coordinates of each endpoint. 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
FROM
"></path>
</svg>
The d attribute of <path> indicates the drawing order, its value is a long string, each letter represents a drawing action, followed by the coordinates.
-M: move to (moveto) - L: draw a 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> represent the abscissa and ordinate of the starting point of the baseline of the text block. The style of text can be specified with the class or style attributes.
<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 and y attributes are the coordinates of the upper left corner of <use>. Additionally, width and height coordinates can be specified.
<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">Circle</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, only for reference.
<svg width="300" height="100">
<defs>
<g id="myCircle">
<text x="25" y="20">Circle</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 code above, the <pattern> tag defines a circle as a dots pattern. patternUnits="userSpaceOnUse" indicates 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 animate.
<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, producing an animation effect.
The attributes of <animate> have the following meanings.
- attributeName: The attribute name for which the animation effect 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 loop mode of the animation.
Animations 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 CSS transform property, if you need to transform, 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), then the from and to attribute values have three numbers, the first number is the angle value, the second value and the third The values are the coordinates of the center of rotation. from="0 200 200" means at the beginning, the angle is 0, and the rotation starts around (200, 200); to="360 400 400" means at the end, the angle is 360, around (400, 400)Rotate.
JavaScript operations
DOM manipulation
If the SVG code is directly written 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>
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: #fff;
}
The SVG can then be manipulated 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 is overridden.
Get SVG DOM
SVG DOM can be obtained by inserting SVG files using <object>, <iframe>, <embed> tags.
var svgObject = document.getElementById('object').contentDocument;
var svgIframe = document.getElementById('iframe').contentDocument;
var svgEmbed = document.getElementById('embed').getSVGDocument();
Note that if you insert an SVG file using the <img> tag, you will not be able to get the SVG DOM.
Read SVG source code
Since an SVG file is a piece of XML text, the SVG source code can be read 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'));
SVG image to Canvas image
First, you need to create an 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, 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
A data table is drawn as a line chart below.
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, Date as the horizontal axis, Amount as the vertical axis, and four lines of data are drawn as a 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
