BITMAP VS VECTOR

Scalable Vector Graphics (SVG)

What is SVG?

The *.svg format is open standard vector-based format that used XML tags. It is typically used in map applications (e.g., Google and Yahoo maps). SVG 1.1 became a W3C Recommendation on August 16, 2011.

Advantages of using SVG

There are a host of advantages of using SVG over other bitmap formats. It can be:

• scaled (resized) or zoomed in or out without losing quality
• printed with high quality at any resolution
• searched, indexed and compressed
• created and updated with any text editor¹
• scripted programmatically
• animated (every elements and attributes)
  

¹ Although SVG can be created with any text editor, it is easier to use a vector-based programs like Adobe Illustrator or Inkscape for complex shapes.

Resource: SVG Tutorial on W3Schools.com

Shapes that can be created with SVG

SVG uses a set of instruction in the form of SVG tags to define the "shape" of an image that can be embeded directly into an HTML5 page. Below is a list of shape tags (including text) that can be drawn with SVG:

<svg width = "200" height = "300">
     <line x1 = "10" y1 = "10" x2 = "100" 
     y2 = "200"  style = "stroke:rgb(0,0,255);
     stroke-width:5" />
</svg>

<svg width="200" height="300">    
      <rect width="100" height="200" 
       style="fill:rgb(0,0,255);stroke-width:3;
      stroke:rgb(255,0,0)">
</svg>

<svg width="200" height="300">
       <circle cx = "100" cy="100" r = "60" 
         stroke = "red" stroke-width = "5" 
         fill = "blue" />
</svg>

 <svg height="200" width="300">
        <ellipse cx="120" cy="80" 
        rx="100" ry="50"
       style="fill:blue;stroke:red;
       stroke-width:5" />
  </svg> 

 <svg height="200" width="300">
       <polyline points="10,10 20,60 30,40 80,70"
       style="fill:none;stroke:blue;stroke-width:3" />
 </svg> 

 <svg height="210" width="300">
       <polygon points="100,70 150,190 50,190"  
       style="fill:blue;stroke:red;stroke-width:5" />
  </svg> 

 <svg height="200" width="300">
     <text x="50" y="50" fill="blue"   
         transform="rotate(20 30,40)">SVG is cool!
     </text>
  </svg> 

 <svg height="200" width="300">
        <path d="M50 50 L150 150 L50 130 Z" />
  </svg> 

Elements/Attributes Notes:

• An SVG image begins and ends with a set of svg tags (<svg>code goes here...</svg). It is best practice to include a message inside of the <svg> tag to let a user know that his or her browser does not support SVG (e.g., Your browser does not support SVG.). However, it is only shown in this tutorial in the first example.
• The width and height attributes of the opening <svg> element define the width and height of the SVG image.
• The <shape> element is used to draw a particular shape. For example, the <circle> is used to draw a circle, <rect> is used to draw a rectangle, etc.
• The cx and cy attributes define the x and y coordinates of circle's center. If they are not used, the is set to (0, 0).
• The r attribute defines the circle's radius.
• The stroke and stroke-width attributes define the stroke and stroke width.
• The fill attribute defines the inside fill color of the shape.
• CSS is used to define the stroke, stroke-width and stroke-color.

SVG Styling

You can style an SVG element with CSS syntax formatting.

SVG Stroke Attributes

Besides the stroke (color) and stroke-width attributes, there are two additionall stroke attributes (stroke-linecap andn stroke-dasharray) that can be applied to an SVG object with an open path:

The stroke-linecap attributes defines different types of endings to an open path. The stroke width has been purposely made big to better see the effects.

<svg height="200" width="300">
     <g fill="none" stroke="blue" stroke-width="10">
      <path stroke-linecap="butt" d="M5 20 l215 0" />
      <path stroke-linecap="round" d="M5 40 l215 0" />
      <path stroke-linecap="square" d="M5 60 l215 0" />
   </g>
</svg>

Memory Tip: It is helpful to think of the linecap as:
butt is actually no butt
round is a round butt
square is a square butt

The stroke-dasharray attribute is used to create an "array" of dashed:

<svg height="200" width="300">
     <g fill="none" stroke="blue" stroke-width="5">
      <path stroke-dasharray ="5,5" d="M5 20 l215 0" />
      <path stroke-dasharray="10,10" d="M5 40 l215 0" />
      <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
   </g>
</svg>

SVG Filters

There are a host of filters, similar to what you can do in Adobe Photoshop or Illustrator that can be used to add special effect to a SVG object. You can also add multiple filters to the same object. All filters are defined within a set of defs tags. The <filter> element is used to define the filter that is being used with an id attribute is used to associate the filter with the SVG object.

The example below uses the same rectangle object created earlier with the stroke properties removed. The main differences are:

• a GaussianBlur filter element (e.g., <feGaussianBlur>) is defined within a set of defs tags with an id attribute assigned (e.g., myBlurFilter).
• A filter attribute is then used in the object and is given the same id attribute name to create the assocation between the object and its effect.

<svg width="200" height="300">
   <defs>
    <filter id="myBlurFilter" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
    <rect  x="10" y="10" width="100"
    height="200" style="fill:rgb(0,0,255)" filter="url(#myBlurFilter)">
</svg>

NOTE:Below is an explanation of the in and stdDeviation attributes:

• in="SourceGraphic" attributes defines the effect for the entire element
• stdDeviation attribute defines the blur amount

All filter effects begin with with the prefix "fe." Some of the most common ones include feGaussianBlur, feBlend, and feImage. For a complete list of filter names and additional examples go w3schools.com/svg/.

SVG Gradients

There are a two types of gradients, similar to what you can do in Adobe Photoshop or Illustrator that can be applied to a SVG object:

1. Linear
2. Radial

The <linearGradient> element is used to define as the name implies a linear gradient within a set of <defs> tags. Linear gradients can be defined is one of three ways:

• Horizontal when x1 and x2 differ and y1 and y2 are equal
• Vertical when x1 and x2 are equal and y1 and y2 differ
• Angular when x1 and x2 and y1 and y2 both differ

We will use the previous rectangle example to "add" a linear gradient to it:

1. Create the rectangle object:
   
   

   <svg width="200" height="300">
       <rect  x="10" y="10" width="100"
       height="200" style="fill:rgb(0,0,255)">
   </svg>

2. Add a linear gradient by:
   1. Adding a gradient definition within a set of <defs> tags:
   2. deleting the style attribute and replacing it with a fill attribute.
      
      <svg width="200" height="300">
      <defs>
      <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(0,255,255);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,255);stop-opacity:1" />
      </linearGradient>
      </defs>
      <rect x="10" y="10" width="100" height="200" fill="url(#grad1)">
      </svg>
      
      
3. (Optional) Add text by creating a <text> tag below the <rect> tag:
   
   
   

SVG Example

Here is an example of using SVG with many features applied:

Adobe Illustrator (AI) and Encapsulated Post Script (EPS)

These vector formats are used in print production and by other programs like Photoshop.

Portable Document Format (PDF)

PDF is a versatile file format that can contain just about any type of data including complete pages.