Difference between revisions of "Courses/Design & Technique-Essential Web Design/Q2/01"

From Publication Station
(Created page with "= SVG = ==What is SVG?== SVG (Scalable Vector Graphics) is a vector image format. Contary to == SVG: image and text == == SVG elements == == SVG in the browser == =...")
 
Line 5: Line 5:
SVG (Scalable Vector Graphics) is a vector image format.
SVG (Scalable Vector Graphics) is a vector image format.


Contary to  
Contrary to raster graphics or bit maps (an image represented by a rectangular grid of pixels) a vector image is a description of its geometric shapes, or ''drawing instructions'', which the viewing
program will draw on the screen.
 
[[File:vector_raster.gif|Image from http://apogeesigns.com/faq/what-is-a-vector-graphic/]]
 
==SVG Characteristics ==
SVG is:
* scalable - zooms wont pixelate or degrade the image quality
* text-based image format - like a webpage you can view and change the source code of an SVG image
* editable in vector drawing software ([https://inkscape.org/en/ Inkscape], Adobe Illustrator) 
* easily included within an HTML document
* syntax similar to HTML


== SVG: image and text ==  
== SVG: image and text ==  

Revision as of 10:28, 11 November 2015

SVG

What is SVG?

SVG (Scalable Vector Graphics) is a vector image format.

Contrary to raster graphics or bit maps (an image represented by a rectangular grid of pixels) a vector image is a description of its geometric shapes, or drawing instructions, which the viewing 

program will draw on the screen.

Image from http://apogeesigns.com/faq/what-is-a-vector-graphic/

SVG Characteristics

SVG is:

  • scalable - zooms wont pixelate or degrade the image quality
  • text-based image format - like a webpage you can view and change the source code of an SVG image
  • editable in vector drawing software (Inkscape, Adobe Illustrator)
  • easily included within an HTML document
  • syntax similar to HTML

SVG: image and text

SVG elements

SVG in the browser

SVG styled by CSS

SVG with custom fonts

This is just the basics. We'll want to manipulate the SVG drawings further, not just style them with CSS, but:

  • add drawing elements,
  • remove them,
  • turn elements into links,
  • transform the image based on user interaction
  • create a new image every time a user visits the site,
  • etc.

To create those actions with need a scripting language for the browser.

(WHAT IS A SCRIPTING LANGUAGE?)
Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=Courses/Design_%26_Technique-Essential_Web_Design/Q2/01&oldid=2210’