This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021

See the Data Visualization column for a series of articles

Reference:

  • SVG | MDN
  • | MDN SVG element reference
  • | MDN SVG interface
  • SVG Animations with GreenSock
  • Draw a flower petal on the screen

Scalable Vector Graphics (SVG) Scalable Vector Graphics (SVG) is a text-based open standard developed by the World Wide Web Consortium (W3C) since 1999. It is an XML-based markup language used to describe two-dimensional Vector Graphics. It can render three types of graphic objects: Vector graphics, bitmaps, text, and seamless integration with CSS, DOM, JavaScript and other web standards.

💡 All modern browsers support SVG, but the versions may vary, and there is a detailed list of browsers that support SVG at Can I Use. Many graphics processing software, such as Inkscape and Adobe Illustrator, provide visual interactive interfaces for manipulating.SVG files.

A simple SVG document consists of a < SVG > root element and a basic shape element, and some simple graphics can also be implemented manually by writing < SVG > tags in front end development.

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <! -- more tags here -->
</svg>
Copy the code

💡 SVG is case-sensitive because it is based on XML’s markup language, and attribute values in SVG must be enclosed in quotes, even numerical values

💡 Each SVG element should declare namespace XMLNS to solve the problem of mixing different XML dialects (SVG is a “dialect” of XML). The above example XMLNS attribute means that the < SVG > tag and its child nodes are the SVG namespace http://www.w3.org/2000/svg. Namespaces are just strings and are widely used because of the uniqueness of URIs, but they are not meant to “link” to an address.

coordinates

SVG draws graphics using a coordinate system/grid system:

  • Take the top left corner of the page as a coordinate point (0,0) in pixels
  • The positive X-axis is going to be to the right
  • The positive y direction is down.

Viewport and viewBox

  • A viewPort is a concept that represents a currently visible area of computer graphics. In Web browser terms, usually identical to a browser window, except for the browser’S UI (menu bar, etc.), the contents outside the viewport are not visible until they are scrolled in. In the SVG concept, it is the size of the < SVG > element

  • < SVG viewBox=”min-x min-y width height”> Specifies a container (width and height) to display graphic elements, This essentially dictates which parts of the < SVG > element are visible, setting an initial state for scaling and panning

    • min-x 和 min-yOf the specified containerThe coordinates of the top left cornerThat is, the coordinate system that defines the parent element (setting the initial state of the translation)
    • width 和 heightThe specifiedThe width and height of the container(Set the initial state of the zoom)

    Setting different viewBox property values can achieve effects similar to zooming or panning. Changing the min-x and min-y of the container can achieve the overall effect of “moving” the elements in the container. Change the width and height of the container to “scale” the elements in the container.

    💡 The coordinates and widths of elements in < SVG > tags that use numeric values (instead of units) are positioned in relative units with values set by the viewBox attribute.

<svg width="200" height="200" viewBox="0 0 100 100">
Copy the code

The canvas size defined here is 200 by 200px. But the viewBox property defines the area on the canvas that can be displayed: a 100 by 100 area starting at (0,0). This area is displayed on a 200-by-200 canvas, resulting in a double magnification effect.

<! -- SVG elements have the same size -->
<svg style="width: 200px; height:200px; border:5px blue solid" viewBox="0 0 30 30." " xmlns="http://www.w3.org/2000/svg">
  <! -- Larger viewBox, so that the radius length of the circle inside the container is resolved on the basis of 30, in which the image is small -->
  <circle cx="50%" cy="50%" r="4" fill="orange"/>
</svg>

<svg style="width: 200px; height:200px; border:5px blue solid" viewBox="0 0 10 10." " xmlns="http://www.w3.org/2000/svg">
    <! -- smaller viewBox, so that the radius length of the circle inside the container is resolved on the basis of 10, in which the image appears large -->
  <circle cx="50%" cy="50%" r="4" fill="orange"/>
</svg>
Copy the code

🔗 Check out the code at codepen

💡 viewBox and viewPort may not be the same, but sometimes you want to force the viewBox to cover the viewport by using the property preserveAspectRatio. This property sets the length to width ratio during stretching. To keep the shape in place