SVG – Scalable Vector Graphics

Today we had a (limited) look at Scalable vector graphics. These share the same properties as all vector graphics; they are made up of descriptions of the shapes in them rather than pixels, they are resolution independent (they do not pixellise when zoomed in), they allow editing of individual objects etc etc. They are particularly used on the web for reasons best shown by the diagram below (from an excellent Wikipedia page about SVG)

The main idea is that you should have an understanding of how something like the text below, turns into the two shapes below it…..

  <rect x="80" y="60" width="250" height="250" rx="20"
fill="red" stroke="black" stroke-width="2px" />

<rect x="140" y="120" width="250" height="250" rx="40"
fill="blue" fill-opacity="0.7" stroke="black" stroke-width="2px" />

Here are my notes from today:


2 Responses to “SVG – Scalable Vector Graphics”

  1. Science News Says:

    that’s pretty cool. I never knew what the extension actually stood for and how they actually worked.

  2. Nate Says:

    I have seen SVG become a lot more popular now that HTML5 and javascript has become really popular. With SVG you can create some really fun dynamic animations and effects!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: