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.
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
Sometimes SVG graphics have to be simplified or they break see PNG to the left on SVG to the right and you'll notice the SVG is missing the hexagonal mesh detail.
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.