![]() ![]() When it is zoomed, each pixel is increased in size to fill multiple pixels on screen, so the image starts to look blocky. The difference becomes apparent when you zoom in the page - the PNG image becomes pixelated as you zoom in because it contains information on where each pixel should be (and what color). The difference is that the left one is a PNG, and the right one is an SVG image. You can find this example live on our Github repo as vector-versus-raster.html - it shows two seemingly identical images side by side, of a red star with a black drop shadow. To give you an idea of the difference between the two, let's look at an example. The SVG format allows us to create powerful vector graphics for use on the Web. ![]() Vector images are defined using algorithms - a vector image file contains shape and path definitions that the computer can use to work out what the image should look like when rendered on the screen.Popular web raster formats include Bitmap (. Raster images are defined using a grid of pixels - a raster image file contains information showing exactly where each pixel is to be placed, and exactly what color it should be.On the web, you'll work with two types of images - raster images, and vector images:
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |