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:

Advertisements

Tags:

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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s


%d bloggers like this: