Raster vs. Vector

As mentioned on other pages, it is our policy to create images as vector files if at all possible. Raster images behave like digital photographs. If you enlarge them they get blurry and choppy. The technical word for this effect is pixelation.

When are Vector Graphics Necessary?

As a business owner you should insist that logos be created as vector art because logos will be used at a wide variety of sizes. You will also need vector art for your promotional products. In most cases signage is also produced with vector art. Vector art is preferred for animation to save on file sizes.

The pictures below are a representation of the difference between vector and raster.

Raster Image 100% Size
Raster Image
100% Size
Raster image (250% enlargement).
Raster image (250% enlargement).
This is pixelated and blurry because the software attempts to smooth out jagged edges which are all pixels.

SVG Graphic Created by Frank's Designs

Vector Graphics on The Web

The image at the right is a vector graphic, you can test it in your browser by zooming in and seeing that it doesn’t pixelate (if you can’t see an image your browser doesn’t support SVG).

  • To zoom in, increasing the size, press and hold Ctrl while pressing +.
  • To zoom out, decreasing the size, press and hold Ctrl while pressing -.
  • To reset size back to normal, press and hold Ctrl while pressing 0.
  • To compare to a raster image you can zoom in see how the image below gets blurry as you enlarge

Drawbacks of SVG Graphics in Web Design

Reliable Emblem - Retro Vector Illustration

SVG graphics have to be simplified or they break (see SVG above – if you can) and PNG to the right (how original vector drawing looks) notice the differences

Tips To Make Responsive SVGs in WordPress

  • Make sure you outline all fonts
  • When you create the SVG edit it so it has no height and width (Delete the size attributes)
  • Add SVG to the Mime Type List (you will need to use a child theme)
  • Control the Aspect Ratio (required for Safari) preserveAspectRatio=”xMinYMin none”
  • Specify the size the SVG should be displayed when you insert it in the page (or whatever)

If you have an image that is not vector but needs to be, Frank’s Designs can create a vector version of the file for you. Call us at 941-374-7711 to discuss your project.

See examples of Vector Logos created by Frank’s Designs.

×