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

  1. SVG is a language for describing 2D graphics using XML.
  2. 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.
  3. 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

  1. Canvas uses JavaScript to draw 2D graphics.
  2. Canvas is rendered pixel by pixel.
  3. 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

  1. Canvas depends on resolution, SVG does not.
  2. Canvas does not support time handling, SVG does support event handling
  3. 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
  4. 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.)
  5. 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

      tag
    • tag is introduced
    • The tag is introduced
    • The tag is introduced
    • 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
  1. 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
  1. 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

  1. 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
  1. 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
  1. 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