HTML5 inline SVG

SVG Scalable Vector Graphics is a graphics format based on Extensible Markup Language (XML) for describing two-dimensional vector graphics. SVG is a new two-dimensional vector graphics format developed by W3C and is also the network vector graphics standard in the specification. SVG strictly follows XML syntax and uses a descriptive language in text format to describe image content. Therefore, it is a vector graphics format that is independent of image resolution.

What is SVG?

SVG stands for Scalable Vector Graphics
SVG is used to define vector-based graphics for the web
SVG uses XML format to define graphics
SVG images do not lose graphic quality when they are enlarged or resized
SVG is a standard of the World Wide Web Consortium
SVG is integrated with W3C standards such as DOM and XSL

SVG Advantages

Compared with other image formats (such as JPEG and GIF), the advantages of using SVG are:

SVG images can be created through a text editor Create and modify

SVG images can be searched, indexed, scripted or compressed

SVG is scalable

SVG images can be produced at any resolution with high quality Printing

SVG can be enlarged without losing image quality

Basically all browsers support SVG, of course IE is from 9 or above.

Example:

<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>SVG</title>
 </head>
 <body>
    <svg width="100%" height="100%"  >
        <circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="black" />
    </svg>
 </body>
</html>

The difference between Canvas and SVG:
SVG
SVG is a method that uses XML A language for describing 2D graphics.
　SVG is based on XML, which means every element in the SVG DOM is available. You can attach a JavaScript event handler to an element.
　In SVG, each drawn graphic is considered an object. If the properties of an SVG object change, the browser can automatically reproduce the graphic.
Features:
Not dependent on resolution
Support for event handlers
Best suited for applications with large rendering areas (such as Google Maps)
High complexity will slow down rendering (any Applications that overuse DOM are not fast)
　　Not suitable for game applications
　Canvas
　 Canvas draws 2D graphics through JavaScript.
Canvas is rendered pixel by pixel.
　In canvas, once a graphic is drawn, it will no longer receive the browser's attention. If its position changes, the entire scene needs to be redrawn, including any objects that may have been covered by graphics.
Features:
Dependent on resolution
No support for event handlers
Weak text rendering capabilities
Ability to save result images in .png or .jpg format
Best suited for image-intensive applications Games where many objects are frequently redrawn

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>SVG</title> </head> <body> <svg width="200" height="200"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect> <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle> </svg> </body> </html>

submit Reset Code

Automatic operation

HTML5 inline SVG

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]