What is the difference between canvas and SVG in HTML5

What I will share with you today is about the difference between canvas and SVG in JavaScript. It has a certain reference effect and I hope it will be helpful to everyone

##[ Recommended course: HTML5Tutorial】

SVG

SVG is a language that uses XML to describe 2D graphics. It is based on XML. That is, we can attach a JavaScript event handler to an element. If the properties of the SVG object change, the browser can automatically reproduce the graphics.

Canvas

Canvas uses JavaScript to draw 2D graphics. It is rendered pixel by pixel. Once the graphic is drawn, if its position changes, the entire scene needs to be redrawn, including any objects that have been overwritten.

SVG and canvas The difference

(1) SVG is a language used to describe 2D graphics in XML, canvas uses JavaScript to dynamically depict 2D graphics

(2) SVG can support event handlers and canvas

is not supported (3) When the attributes in SVG change, the browser can re-render it, which is suitable for vector graphics, but canvas cannot, which is more suitable for video games, etc.

(4) Canvas can draw pixels very well, and can be used to save the results as png or gif, and can be used as an API container.

(5) canvas depends on resolution. SVG is resolution independent.

(6) SVG has better text rendering, but Canvas cannot render well. SVG in rendering may be slower than Canvas, especially when a large amount of DOM is applied.

(7) Canvas is more suitable for rendering smaller areas. SVG renders better over larger areas.

Comparison between SVG and canvas

SVGcanvasExtensible Not extensibleSupport DOM and events No event supportNot dependent on resolution Resolution dependent May be slower when rendering complex areas Not suitable for larger or complex areas Areas Render better Larger areas (except DOM) Render smaller areas Better Vector graphics More suitable for animations (videos) and images Not suitable for API Suitable for API Present text well Cannot present text well ##Case analysis

canvas drawing A circle

<canvas id="circle"></canvas>

<script type="text/javascript">
	
	var circle=document.getElementById("circle");
	var yuan=circle.getContext("2d");
	yuan.beginPath();
	yuan.strokeStyle="pink";
	yuan.arc(50,50,50,0,Math.PI*2,true);
	 yuan.stroke();
</script>

You can see that there are jagged edges around the border when the picture is enlarged

SVG drawing a circle

<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100%" version="1.1">
<circle cx="100" cy="50" r="40" stroke="pink"
stroke-width="2" fill="#fff"/>
</svg>

It can be seen that the graphics drawn by SVG will not be distorted when enlarged.

Summary: The above is the entire content of this article. I hope that through this article, everyone will have a certain understanding of the difference between canvas and SVG.

The above is the detailed content of What is the difference between canvas and SVG in HTML5. For more information, please follow other related articles on the PHP Chinese website!