Introduction to SVG 2D in HTML5: Comparison between canvas and 13-svg and analysis of strengths and applicable scenarios

Comments: The main features of SVG and Canvas have been summarized so far. Now, let's compare the two technologies and analyze their strengths and applicable scenarios, if you are interested, you may find it helpful.

So far, the main features of SVG and Canvas have been summarized. They are both 2D graphic display technologies supported in HTML5, and both support vector graphics. Now, let's compare the two technologies and analyze their strengths and applicable scenarios.
First, analyze the notable features of the two technologies. See the following table:

Canvas	SVG
Pixel-based (dynamic. png)	Shape-based
Single HTML Element	Multiple graphic elements that are part of the DOM
Modify only by script	Modify through scripts and CSS
Event model/user interaction (x, y)	Event model/user interaction abstraction (rect, path)
Better performance when the drawing is small, the number of objects is large (> 10 k) (or both)	Better performance when the number of objects is small (<10 k) and the drawing is larger (or both)

From the comparison above, we can see that Canvas has a powerful advantage in pixel operations. The biggest advantage of SVG lies in convenient interactivity and operability. Canvas is greatly affected by the size of the Canvas (actually the number of pixels). SVG is greatly affected by the number of objects (the number of elements. Canvas and SVG have different modification methods. After drawing a Canvas object, you cannot use scripts or CSS to modify it. SVG objects are part of the Document Object Model, so they can be modified at any time using scripts and CSS.
In fact, Canvas is a pixel-based Real-time graphics system. After an object is drawn, it is not saved to the memory. If you need this object again, you need to redraw it; SVG is a shape-based reserved graphics system. After an object is drawn, it is saved in the memory. When you need to modify the object information, you can directly modify it. This fundamental difference leads to different application scenarios.

We can also understand this in the following common applications.
High Fidelity documents
This is easy to understand. In order to browse documents without distortion during scaling or print high-quality documents, SVG, such as the map service, is usually preferred.
Static Image Resources
SVG is often used for simple images, such as applications, images on webpages, large images, and small images. Because SVG needs to be loaded into the DOM, or at least parsed before the image is created, the performance will be slightly reduced, but the cost (about several milliseconds) compared to the cost of rendering the web page ), this loss of efficiency is extremely small.
In terms of file size (for the purpose of evaluating network traffic), the size of SVG images is not much different from that of png images. However, because SVG can be scaled as an image format, if a developer wants to use the image in a larger proportion or the user wants to use a high DPI screen, using SVG is a good choice.

Pixel operations
When using Canvas, you can get a fast drawing speed without retaining the corresponding information of elements. Especially when pixel operations need to be processed, the performance is better. For such applications, the Canvas technology is used.
Real-time Data
Canvas is ideal for non-interactive real-time data visualization. For example, real-time weather data.
Charts and graphs
You can use SVG or Canvas to draw related graphs and charts. But if you want to emphasize operability, SVG is undoubtedly the best choice. If you do not need interactivity and emphasize performance, Canvas is more suitable.
Two-dimensional games
Most games are developed using low-level APIs, so Canvas is easy to accept. But in fact, Canvas needs to be repeatedly drawn and located when drawing game scenarios. SVG is maintained in the memory and it is very easy to modify relevant attributes, therefore, SVG is also a good choice.
When several objects are used on the game board to create a game, there is almost no performance difference between Canvas and SVG. However, the Canvas code will increase as more objects are created. Since Canvas objects must be re-drawn during each game loop, the speed of Canvas games slows down.
User Interface Design
Because of its good interaction, SVG is undoubtedly better. By using the SVG retention mode graphical display, you can create all user interface details in HTML-like markup of the body. Because each SVG Element and sub-element can respond to individual events, you can easily create complex user interfaces. Canvas requires you to specify how to create each part of the user interface in a more complex code order. The order you need to follow is:
• Obtain the context.
• Start painting.
• Specify each line and fill color.
• Define shape.
• Complete the painting.
In addition, Canvas can only process events of the entire Canvas. If there is a more complex user interface, you must determine the coordinates of the position clicked on the canvas. SVG can process the events of each sub-element separately.

The following two examples illustrate the technical advantages of canvas and svg respectively:

Typical canvas applications, such as green screens: Http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/canvasgreenscreen.htm

As follows:

After opening the page, you can view the page source code.

This application reads and writes pixels from two videos to another. The Code uses two videos, two canvases, and one final canvas. Capture one frame of the video at a time and draw it to two separate canvases to allow data to be read back:

The Code is as follows:
CtxSource1.drawImage (video1, 0, 0, videoWidth, videoHeight );
CtxSource2.drawImage (video2, 0, 0, videoWidth, videoHeight );

Therefore, the next step is to retrieve the data of each drawn image so that you can check each individual pixel:

The Code is as follows:
CurrentFrameSource1 = ctxSource1.getImageData (0, 0, videoWidth, videoHeight );
CurrentFrameSource2 = ctxSource2.getImageData (0, 0, videoWidth, videoHeight );

After obtaining it, the code will browse the green pixel array and search for green pixels. if it finds it, the code will replace all green pixels with pixels in the background scenario. :

The Code is as follows:
For (var I = 0; I <n; I ++)
{
// Grab the RBG for each pixel:
R = currentFrameSource1.data [I * 4 + 0];
G = currentFrameSource1.data [I * 4 + 1];
B = currentFrameSource1.data [I * 4 + 2];

// If this seems like a green pixel replace it:
If (r> = 0 & r <= 59) & (g> = 74 & g <= 144) & (B> = 0 & B <= 56) // Target green is (24,109, 21), so look around those values.
{
PixelIndex = I * 4;
CurrentFrameSource1.data [pixelIndex] = currentFrameSource2.data [pixelIndex];
CurrentFrameSource1.data [pixelIndex + 1] = currentFrameSource2.data [pixelIndex + 1];
CurrentFrameSource1.data [pixelIndex + 2] = currentFrameSource2.data [pixelIndex + 2];
CurrentFrameSource1.data [pixelIndex + 3] = currentFrameSource2.data [pixelIndex + 3];
}
}

Finally, the pixel array is written to the target canvas:

The Code is as follows:
CtxDest. putImageData (currentFrameSource1, 0, 0 );

Typical svg applications, such as user interfaces:

The Code is as follows:
<! DOCTYPE html>
<Html>

<Head>
<Script type = "text/javascript">
// This function is called when the circle is clicked.
Function clickMe (){
// Display the alert.
Alert ("You clicked the svg ui element .");
}
</Script>
</Head>
<Body>
<H1>
SVG User Interface
</H1>
<! -- Create the SVG pane. -->
& Lt; svg height = "200" width = "200" & gt;
<! -- Create the circle. -->
<Circle cx = "100" cy = "100" r = "50" fill = "gold" id = "uIElement" onclick = "clickMe ();"
/>
</Svg>
<P>
Click on the gold circular user interface element.
</P>
</Body>
</Html>

This example is simple, but has all the features of the user interface. From this example, we once again appreciate the convenient interaction of svg.

Finally, we will use a picture to summarize the technologies suitable for each type of application. In the figure, each square represents a type of application. The closer it is to a certain end, the more advantageous this technology has:

 

Practical reference:
Script Index: http://msdn.microsoft.com/zh-cn/library/ff971910 (v = vs.85). aspx
Development Center: https://developer.mozilla.org/en/SVG
Hot reference: http://www.chinasvg.com/
Official documents: http://www.w3.org/TR/SVG11/