Vector Graphic vs Raster Image
Vector Graphic
A vector graphic is a mathematical formula created to represent an image. These files use points and in-between each point is a line with a measurable distance between them, allowing a vector graphic to scale to any size without loss of quality. This is particularly useful for large format applications, web development, & production, where loss of quality is a concern. The vector file itself is able to create: paths, colors, text, shapes, gradients, patterns, clippings, maskings, filters, meta search, animations, & interactivity.
File extension types: .svg, .eps, .ai, & .pdf
We strongly recommend using .pdf or .eps for production & design file exchanges, including sticker production. A PDF and EPS file will embed images into the document, an AI file will link the images instead — if you have any raster images inside of your vector file make sure to save it as a PDF or EPS file before sharing. If you choose to use an .ai file you must include the images with the design, professionals using this method commonly zip all the files together.
Raster Image
A raster image is created with tiny pixels packed into a square/inch, also know as PPI (Pixels per square inch). These pixels are arranged in a way to create an image, which is what we call a bitmap. A bitmap is a representation in which each item corresponds to one or more bits of information. A photo taken off your phone is a raster image, the complex range of colors is best represented with pixels, much like a physical piece of painted artwork.
File extension types: .png, .jpg, .gif, & .tiff
We strongly recommend using .png or .jpg for production & design file exchanges, including sticker production. Make sure to save the image at the highest resolution available.
Transparent background: A PNG file has the ability to make the background transparent — this will be presented as a save/export option inside your raster editing program. A trasnaprent PNG is particularly useful for web graphics and sticker production.
More About Vector Graphics
History of Vector Graphics
It all started with the Scalable Vector Graphics (SVG) file, it was created by World Wide Web Consortium (W3C) in 1999. A SVG file based off an Extensible Markup Language (XML) file, and designed for two dimensional illustrations and animations. The vector formula itself is defined as an XML file, while the style (color) of a vector graphic is written with Cascade Style Sheet (CSS), the same programming language used to style this website. These combinations allows any vector file to be manually coded & animated without the use of an illustration software.
All modern web browsers support SVG rendering, it is a standard in todays world. Supported browsers include but are not limited to: Brave, Chrome, Safari, Opera, & Microsoft Edge.
Usage with Vinyl Plotters, Laser Engravers & CNC Machines
A vector file is used to communicate with a physical vinyl plotter to direct its cutting path. The points & lines that makes up a vector file are a crucial piece for telling the machine where and what to cut on a vinyl substrate — it’s the machine’s instructions. For sticker prodouction we define this as a cutline.
Vector Graphics can animate
Perhaps the coolest part of a SVG file is the ability for interactive animation. This allows apps & website developers to create eye catching icons. Notice all those sweet animated icons in your phone apps? That’s an animated vector file at work, an actual formula working behind the scenes, not an animated raster gif.
Adobe PDF file is based off a SVG file
Cool fact, Adobe designed their PDF file off the markup language of a SVG file. The XML & CSS combo gives a PDF the ability to position, search, & scale a PDF file, this is why you are able to search through the text inside a PDF file. When you load a PDF file it is rendered in real time with code, often with large files you can see it rendering in real time.
Adobe .AI file is an enhanced & rebranded PDF file
Adobe designed their core .AI file off the markup language of a PDF file, which comes from the base SVG file.
An Adobe Illustrator (AI) file is a propretary file used specifically for the professional vector graphics editor Adobe Illustrator. There are small differences between an AI & PDF file, the biggest is the code inside the header allowing it to only work with Adobe Illustrator.
When you choose to save as an .AI file your content will be placed inside a shell PDF with “private data.” This private data is only to be opened and viewed with Adobe Illustrator. It is not backwards compatable with previeous versions of illustrator, since there are updated versions of the AI file with each software iterations. This is why we recommend saving as a PDF or EPS file for file sharing, as it is more commonly accepted across the different types of vector editing softwares.
The Vector Forumla
Open any SVG, PDF, Ai, or EPS file in text edit (Mac OSX) or Notepad (Windows) and you’ll see the XML/CSS code in action. It’s awesome, give it a try! ?
Below are some examples of a simple design matched with their corresponding code:
Download source files for testing: https://stickerfocus.net/downloads/Vector-Objects-StickerFocus.com.zip