Bitmaps, also known as dot matrix images or drawing images, are composed of individual points called pixels (picture elements). These points can be arranged and colored differently to form a pattern. When you zoom in on the bitmap, you can see countless individual squares that make up the entire image. The effect of enlarging the bitmap size is to increase a single pixel, so that the lines and shapes appear uneven. However, if viewed from a slightly distant location, the color and shape of the bitmap image appear to be continuous.
When it comes to SVG, I think most people's first impression is vector scaling. Yes, SVG is an ideal choice for making logos, icons and buttons. Unlike bitmaps, SVG can scale arbitrarily without distortion. At the same time, unlike traditional Web fonts, SVG can use multiple color, gradient and even complex filters to process text.
What are the advantages and disadvantages of bitmap and SVG?
image type |
form |
advantage |
shortcoming |
bitmap |
pixel |
As long as there are enough pixels with different colors, colorful images can be produced to vividly represent the natural scene |
Scaling and rotation are prone to distortion, and the file capacity is large |
SVG |
Mathematical vector |
The file size is small, and the image will not be distorted when zooming in, zooming out, or rotating |
It is not easy to make images with too many color changes |
Let's compare the similarities and differences between bitmap and SVG image.
Bitmap Usage
The application of bitmap in Web projects has been very mature. If we need a regular picture display, we usually do not use multiple pictures, but put the needed pictures in one picture, for example:
In this example, 8 24 × 24 icons are collected in a 192 × 24 image. The advantage of this is that we only need to send an HTTP request to download all the icons we need, reducing the pressure on the number of concurrent browser requests, improving the speed of page loading, and enhancing the user experience.
When we need to reference one of the icons, we can use the following CSS code to display the image:
#print { width: 24px; height: 24px; url("sprite.png" ) -168px 0; }
SVG Usage
SVG can also integrate multiple images into one file. And it is better than bitmap image in interactivity; You can use image names to reference SVG objects. It is obviously more convenient than manually calculating pixel positions to locate images through CSS styles.
Before using, we first create a very simple SVG, which contains three independent icons: a green circle, a red square and a blue triangle.
<? xml version="1.0"?> <svg viewBox="0 0 100 100" xmlns=" http://www.w3.org/2000/svg "> <g class="sprite" id="circle"> <ellipse cy="50" cx="50" ry="45" rx="45" stroke-width="5" stroke="#00ff00" fill="#00ff00" fill-opacity="0.75" /> </g> <g class="sprite" id="square"> <rect y="5" x="5" width="90" height="90" stroke-width="5" stroke="#ff0000" fill="#ff0000" fill-opacity="0.75" /> </g> <g class="sprite" id="triangle"> <path d="M20,7 L92,50 L6,93 z" stroke-width="5" stroke="#0000ff" fill="#0000ff" fill-opacity="0.75" /> </g> </svg>
In XML code, each shape is assigned SpriteClass and ID. You can now see a stacking effect. As shown in the figure:
There is a little trick - you can control to display only the current target layer and hide other layers through CSS style:
<defs> <style><! [CDATA[ .sprite { display: none; } .sprite:target { display: inline; } ]]></style> </defs>
Therefore, if we can display the target object through a customized link, for example, the SVG file name is sprite. xml, we can specify the target object by adding a hash value in the URL, such as sprite. xml # circle, we can only display the layer where the circle is located.
We can add SVG files in many ways, such as Object, iframe, img tag, or as CSS background (Chrome, Safari, and Opera 15+do not support adding SVG in the form of img tag or CSS background).
<html lang="en"> <head> <meta charset="utf-8" /> </head> <style> body { font-family: sans-serif; margin: 10px; color: #222; background-color: #eee; } div.sprite { display: inline-block; width: 100px; height: 100px; } div#circle { background-image: url("sprite.svg#circle"); } div#square { background-image: url("sprite.svg#square"); } div#triangle { background-image: url("sprite.svg#triangle"); } </style> <body> <h2>object</h2> <object type="image/svg+xml" width="100" height="100" data="sprite.svg#circle"></object> <object type="image/svg+xml" width="100" height="100" data="sprite.svg#square"></object> <object type="image/svg+xml" width="100" height="100" data="sprite.svg#triangle"></object> <h2>iframe</h2> <iframe src="sprite.svg#circle" width="100" height="100" frameborder="0"></iframe> <iframe src="sprite.svg#square" width="100" height="100" frameborder="0"></iframe> <iframe src="sprite.svg#triangle" width="100" height="100" frameborder="0"></iframe> <h2>img</h2> <img src="sprite.svg#circle" width="100" height="100" /> <img src="sprite.svg#square" width="100" height="100" /> <img src="sprite.svg#triangle" width="100" height="100" /> <h2>CSS background</h2> <div id="circle" class="sprite"></div> <div id="square" class="sprite"></div> <div id="triangle" class="sprite"></div> </body> </html>
The effects seen in IE9 and Chrome are as follows:
From the above description, do you now have a general understanding of the use and advantages of SVG? Although it is so practical, there are different opinions about the future of SVG technology. Although SVG is scalable, easy to interact and network saving
SVG is still not widely used in Web projects due to its advantages such as network resources. What is the reason?
SVG does not support earlier IE browsers - only IE9 and later versions are supported.
SVG was born in 1999 - it is still tepid, giving people the feeling that it is an old and unpopular technology.
Design tools are scarce - making it difficult to use.
SVG is based on XML, which gives most beginners a very complex impression and makes them flinch.
Let's wait and see where SVG will go.
This article is from“ Grapevine Control Blog ”Blog, please keep this source http://powertoolsteam.blog.51cto.com/2369428/1320980
