Search⌘ K
AI Features
Home
Courses
Computer Graphics in Python and Pycairo

Vector Graphics

Explore what vector graphics are and how they differ from pixel images. Understand how vector images store instructions, their resolution independence, and how rendering converts them for display. Discover typical uses such as diagrams, logos, and text, and learn about effects like gradients and shadows in vector formats.

We'll cover the following...

Storing vector graphics

Vector images take a different approach to storing images. Instead of storing the pixels that make up the image, a vector graphics file stores a list of instructions for how to draw the image. Here is an example of a scalable vector graphics (SVG) file. SVG is a widely-used vector format that is based on XML. It is supported by all the modern web browsers and is the main file format used by the popular open-source vector image editor, Inkscape.

Don’t worry about the details. We will probably never have to edit, or even look at, an SVG file in real life. This is just an illustration, used to give us an idea of what a vector graphics file might look like:

HTML
<svg
  <g
    id="layer1"
    transform="translate(0,-572.36216)"> 
    <circle
      style="stroke:none;fill:#008000"
      id="path5387"
      cx="130"
      cy="802.36218"
      r="50" /> 
    <rect
      style="fill:#000080;stroke:none"
      id="rect5389"
      width="160"
      height="120"
      x="250"
      y="682.36218" /> 
    <text
      xml:space="preserve"
      style="font-style:normal;font-weight:normal;font-size:80px;line-height:125%;f\
ont-family:sans-serif;
      letter-spacing:0px;word-spacing:0px;fill:#ff0000;fill-opacity:1;stroke:none"
      x="249.375"
      y="961.22937"
      id="text5391"
      ><tspan
        id="tspan5393"
        x="249.375"
        y="961.22937">ABCD</tspan></text>
  </g> 
</svg>

Here is what the image looks like:

Even without understanding the format in detail, is clear that it defines a circle, a ...