preface
This article, as the beginning of a comprehensive introduction to the functions and features of SVG, mainly introduces what SVG is, the development history of SVG and some features of SVG.
The whole series of knowledge points have been basically concluded, the specific outline is as follows, and will be replaced with article links as the article updates.
- Basics (I) – What is SVG, its history, and how to introduce and use it
- Basic part (2) – the use of basic graphics and part of the container element introduction and use
- Basics 3 – Texturing, Clipping, Masking and marking, and gradients
- Filter part 1 – The introduction of filters and the use of some filters
- Filter part 2 – Filter mixing, matrix transformation, mapping, light source filter
- SMIL Animation
What is the SVG
Scalable vector graphics, or SVG, is one of the branching languages of W3C XML for marking scalable vector graphics. SVG is now mostly supported in Firefox, Opera, Webkit, Internet Explorer and other mainstream browsers.
SVG is an XML language, similar to XHTML, that can be used to draw vector graphics. SVG can create a graph by defining the necessary lines and shapes, modify an existing bitmap, or create a graph by combining the two. Graphics and their components can be transformed, composited, or completely changed with filters.
History of SVG
- In 1998, Microsoft introduced a vector Markup Language (VML) based on XML.
- The first draft was produced by the World Wide Web in February 1999
- Six drafts were submitted in the following two years, with increasing recognition and support
- SVG 1.1 was finalized in 2003
- In 2018, SVG 2.0 came out
Features of SVG. Comparison with Canvas
The characteristics of SVG
- SVG is a language for describing 2D graphics using XML.
- SVG is based on XML, which means that every element in the SVG DOM is available. You can attach JavaScript event handlers to an element.
- In SVG, every graph that is drawn is treated as an object. If the attributes of an SVG object change, the browser can reproduce the graphics automatically.
The characteristics of the Canvas
- Canvas uses JavaScript to draw 2D graphics.
- Canvas is rendered pixel by pixel.
- In canvas, once the graph has been drawn, it doesn’t continue to get attention from the browser. If its position changes, the entire scene also needs to be redrawn, including any objects that may have been covered by the graph.
Comparison between Canvas and SVG
- Canvas depends on resolution, SVG does not.
- Canvas does not support time handling, SVG does support event handling
- Canvas will clear the Canvas and re-render the whole Canvas every time it renders. SVG only needs to modify the attributes of the corresponding elements, and rendering is done by the browser itself
- In the case of low graph complexity, SVG is similar to Canvas. The more complex the graph is, the faster Canvas’s rendering speed is better than SVG’s. (Because SVG is, after all, DOM, it’s expensive. Canvs directly sends the drawing instruction to GPU for drawing every frame of image.)
- Canvas can save the resulting image in.png or.jpg format
SVG compatibility and current specifications
The SVG specification
The current specifications in use are SVG 1.1 and SVG 2.0. SVG2.0, which is being developed, takes a similar approach to CSS3, with loosely coupled components forming a set of standards.
SVG compatibility
Most browsers already support SVG, but there are still differences between browsers. For details, see Can I Use
Vector coordinates and positioning
Like Canvas, SVG has its own Canvas. Unlike Canvas, SVG’s size or length is relative. This can be adjusted by adjusting the canvas to viewBox ratio.
<h4>The canvas is 200 x 200 px and the viewport is 200 x 200</h4>
<svg class="border" width="200" height="200" viewBox="0 0 200 200">
<circle cx="100" cy="100" r="80" fill="green" />
</svg>
<br/>
<h4>The canvas is 200 x 200 px and the viewport is 400 x 400</h4>
<svg class="border" width="200" height="200" viewBox="0 0 400 400">
<circle cx="100" cy="100" r="80" fill="green" />
</svg>
<br>
<h4>The canvas is 200 x 200 px, the viewport is 400 x 400, and the viewport starting point is -90-90</h4>
<svg class="border" width="200" height="200" viewBox="- 90-90, 400, 400">
<circle cx="100" cy="100" r="80" fill="green" />
</svg>
<br/>
<h4>The canvas is 200 x 200 pt and the viewport is 400 x 400</h4>
<svg class="border" width="200pt" height="200pt" viewBox="0 0 400 400">
<circle cx="100" cy="100" r="80" fill="green" />
</svg>
Copy the code
Set the viewBox to 200 x 200 on a 200 x 200 canvas to show a circle with a radius of 80
<svg width="200" height="200" viewBox="0 0 200 200">
<circle cx="100" cy="100" r="80" fill="green" />
</svg>
Copy the code
SVG width and heigt set the size of the canvas. ViewBox is the size of the viewport display area.
If a canvas is 200 by 200, display a 400 by 400 area. So the content is twice as small as the content on the canvas of 200, so the radius is half as small, so the area is 1/4 of the original area
<svg width="200" height="200" viewBox="0 0 400 400">
<circle cx="100" cy="100" r="80" fill="green" />
</svg>
Copy the code
Specify that the viewport start point is (-90,-90). The little circle goes to the middle.
<svg class="border" width="200" height="200" viewBox="- 90-90, 400, 400">
<circle cx="100" cy="100" r="80" fill="green" />
</svg>
Copy the code
Why does it get smaller
First we need to understand what a viewBox is.
Basically, one pixel in an SVG document corresponds to one pixel on an output device, such as a display.
You can control the display area (x, Y, W, H) by defining viewBox properties. When this property is set, you define an SVG coordinate system on which all graphics defined in the current SVG element will be drawn.
- X: the initial x position
- Y: indicates the initial y position
- W: Width of the view container
- H: Height of the view container
The canvas mentioned above, the width and height defined for the SVG, actually defines the device pixels of the SVG block, such as 200px wide and 200px high. You can also assign units other than PX, such as pt.
But it doesn’t matter how big the canvas is, or what unit the canvas is in. The final device pixels of the canvas are combined with the viewBox definition values to generate an SVG coordinate system. It can be understood that the unit scale of the SVG coordinate system is confirmed at this point
Figure 1 shows the size of 200 * 200 with a 200 * 200 canvas. In an SVG coordinate system, one scale unit represents one device pixel. Radius R :80, corresponding to 80 scale units, r corresponding device pixel is 80
Figure 2 shows the size of 400 by 400 with a 200 by 200 canvas. In the SVG coordinate system, one scale unit represents 0.5 device pixels. Radius R :80, still corresponding to 80 scale units, r corresponding to the device pixel is 40. The result on the canvas is a quarter of the original area.
The size of the canvas relative to the size of the viewBox is the key to SVG scaling. This mapping is called the user coordinate system. In addition to scaling, the coordinate system can also rotate, tilt, and flip. The default user coordinate system 1 user pixel is equal to 1 pixel on the device (although the device may define exactly how big a pixel is)
Introduction and use of SVG
SVG was introduced and used in two ways
- The document is defined by SVG tags
- Import external SVG files
- Introduced in the < SVG > tag via the
- The
- The tag is introduced
- The
- Introduced in the < SVG > tag via the
It should be noted that wechat applet cannot use SVG at present. Alipay applet can use image tag to map to.svg file for display
Embed and Object are identical. These tags were originally intended to address browser compatibility issues. Both tags are supported by modern browsers. The performance is the same.
Import external SVG files
Browsers can open SVG files directly, but if you want to display SVG files in HTML you need a container
SVG files
<! DOCTYPEsvg PUBLIC "- / / / / W3C DTD SVG 1.1 / / EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg id="ppt" t="1633915688232" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3051" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M658.58 63.94h269.26c-78.06 0-141.33 63.28-141.33 141.33 141.33v612.95c0 78.06 63.28 141.33 141.33 141.33h485.49c78.06 0 141.33-63.28 141.33-141.33v301.44c0-31.83-12.64-62.35-35.15-84.85l-117.5-117.5 a120.017 120.017 0 0-84.85-35.15z" fill="#F98950" p-id="3052"></path><path d="M860.93 216.59L-117.5-117.5a120.001 120.001 00 -61.75-32.9v131.88c0 41.87 33.94 75.81 75.81 75.81h135.37a119.93 119.93 0 0-31.93-57.29zM556.02 348.380.37c-13.25 0-24 10.75-24 24v302.74c0 13.25 10.75 24 24 24s24-10.75 24-24 v595. 6 h151. 65 c68. 16 0 123.61 55.45 123.61 123.61 s - 55.45-123.61-123.61-123.61 - z m0 199.22 H404.37 V396.38 h151.65 c41.69 0 75.61 33.92 75.61 75.61s-33.92 75.61-75.61 75.61z" fill="#F26C38" p-id="3053"></path><path d="M556.02 336.38h380.37C-13.25 0-24 10.75-24 24v302.74c0 13.25 10.75 24 24 24s24-10.75 24-24v583.6h151.65c68.160 "M556.02 336.38h380.37c-13.25 0-24 10.75-24 24v302.74c0 13.25 10.75 24 24 24s24-10.75 24-24v583.6h151.65c68.160 123.61 55.45 123.61 123.61 s - 55.45-123.61-123.61-123.61 - z m0 199.22 H404.37 V384.38 h151.65 c41.69 0 75.61 33.92 75.61 S - 75.61 33.92 75.61 75.61 75.61 z" fill="#FFFFFF" p-id="3054"></path></svg>
Copy the code
- It is introduced in the SVG tag with the use tag
<! / / add id to ppt.svg / / add id to ppt.svg / / add ID to PPt.svg / / add ID to PPt.svg / /
<svg width="200" height="200" viewBox="0 0 200 200" >
<use xlink:href=".. /static/PPT.svg#ppt" />
</svg>
Copy the code
- Embed tags
<embed
src=".. /static/PPT.svg"
width="300"
height="100"
type="image/svg+xml"
/>
<! -- SVG format ADAPTS to container size -->
<embed
src=".. /static/PPT.svg"
width="300"
height="200"
type="image/svg+xml"
/>
Copy the code
- Object tag (not recommended)
<object
data=".. /static/PPT.svg"
width="300"
height="100"
type="image/svg+xml"
></object>
<! -- SVG format ADAPTS to container size -->
<object
data=".. /static/PPT.svg"
width="300"
height="200"
type="image/svg+xml"
></object>
Copy the code
- Img tags
<img src=".. /static/PPT.svg" width="300" height="100" alt="">
<! -- SVG format ADAPTS to container size -->
<img src=".. /static/PPT.svg" width="300" height="200" alt="">
Copy the code
- Iframe tag (not recommended)
<! Content does not adapt to the container, beyond parts are displayed as scroll bars -->
<iframe src=".. /static/PPT.svg" width="300" height="100"> </iframe>
<iframe src=".. /static/PPT.svg" width="300" height="200"> </iframe>
Copy the code
Write in the last
If there are problems or mistakes, please correct them. I will update everything as soon as possible.
The resources
Source: W3School
Source: w3_SVG
Reference Source – w3_SVG2