Vector vs. Raster
What Is the Difference Between Vector and Raster?
Vector graphics are drawn from points, lines, and curves described by math, so they stay sharp however large they print. Raster images are a fixed grid of pixels, so they hold detail only up to the size their pixels allow.
Most designs use both: vectors for logos, type, and shapes, and raster images for photos. In CE.SDK, shapes and text are vectors and photos are raster images, and each export format decides how the mix comes out.
Vector vs. Raster: How Do They Compare?
How each is built decides how far it scales and what it suits.
| Vector | Raster | |
|---|---|---|
| Built from | Points, lines, and curves | A grid of pixels |
| When enlarged | Stays sharp | Turns soft and blocky |
| Best for | Logos, type, illustrations | Photos and scans |
| File size | Grows with the number of shapes | Grows with the pixel count |
| Common formats | SVG, EPS, AI, PDF | JPEG, PNG, WebP, TIFF, GIF |
How Can You Tell If a File Is Vector or Raster?
Zoom in. Vector edges stay smooth however far you go, while raster edges break into small squares.
Zoom in far
Go far past normal size. Vector edges are redrawn at every step, while a raster file just enlarges its pixels.
Look past the file extension
PDF and SVG files can hold raster images, and a logo in either may still be pixels, so check what is inside.
Don’t go by file size
Size predicts nothing here. A huge file can be pixels, and a tiny one can be paths that scale to a billboard.
When Should You Use Vector or Raster?
Use vectors for anything built from shapes and type, and raster images for anything captured from a camera or scanner.
Use vector for
-
Logos and type
-
Icons and flat illustrations
-
Artwork printed at many sizes
Use raster for
-
Photos and scans
-
Images for websites and social media
-
Graphics for slides and email
How Does CE.SDK Work With Vector and Raster?
Bring artwork in
Raster images in PNG, JPEG, WebP, GIF, or BMP and SVG files import as images. On the web and server, EPS and AI artwork imports as editable vector blocks.
Trace raster images when you need vectors
On the web, the Vectorizer plugin turns a raster image such as a logo into vector paths that scale cleanly.
Export in the format the job needs
Image exports such as PNG, JPEG, and WebP come out as pixels. PDF and SVG exports keep paths and type as vectors, while images and some effects, such as gradients with transparency, are rasterized.
Vector and Raster in Brand Kits and Print Products
A logo for every size
A brand kit stores the company logo as a vector, so the same file works on a business card, a website, and a trade show banner.
Photo products with vector text
A photo calendar pairs raster photos with vector dates and captions. The photos need enough pixels for the page, while the text stays crisp at any page size.
FAQs
Raster. A PNG can have a transparent background, which makes it handy for logos on screens, but it is still a fixed grid of pixels. Enlarged past its size, a PNG logo turns blurry like any other raster image.
It can be either, or both. A PDF is a container that keeps vector shapes and text as vectors, and a blurry photo placed in one is still a blurry photo. Zoom in to see what a PDF actually holds.
Not always. SVG is a vector format, but it can also hold embedded raster images, so an SVG made from a photo is still a grid of pixels inside.
Links
Documentation and references for this concept.
Related Terms
Rasterize
Turning vector shapes and text into pixels, at a resolution fixed at the moment of conversion. CE.SDK rasterizes differe…
Vectorizer Plugin
A CE.SDK plugin that converts raster (pixel-based) images into scalable vector graphics (SVG) directly in the browser, t…
Print Resolution
How many pixels of an image land in each inch of paper once it prints, usually requested as 300 DPI. CE.SDK's scene DPI …
EPS File
A vector format for logos and artwork that brands, sign makers, and print suppliers use to share files. CE.SDK's EPS imp…
Shape
The geometric boundary and clipping area of a graphic block: one of several types: Rect (optionally with rounded corners…