Difference between revisions of "Courses/Design & Technique-Essential Web Design/Q2/01"
From Publication Station
Line 54: | Line 54: | ||
</source> | </source> | ||
== SVG | == SVG basic shapes == | ||
As you can see in the example an SVG is made up from basic shapes, that combined, transformed and grouped can form drawings. | |||
The basic shapes are: | |||
* line | |||
<line x1="40" y1="20" x2="80" y2="20" style="stroke-width: 10; stroke: black;"/> | |||
* rectangle | |||
<rect x="50" y="10" width="20" height="40" style="fill: none; stroke: black;"/> | |||
* circle | |||
<circle cx="30" cy="30" r="20" style="stroke: black; fill: red;"/> | |||
* ellipse | |||
<ellipse cx="80" cy="80" rx="20" ry="10" style="stroke: black; fill: none;"/> | |||
* polygon - series of points that describe a geometric area to be filled and outlined | |||
<polygon points="15,10 55, 10 45, 20 5, 20" | |||
style="fill: red; stroke: black;"/> | |||
== SVG in the browser == | == SVG in the browser == |
Revision as of 11:55, 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.
SVG Characteristics
- 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
This SVG image is the representation of the following SVG code:
You can use the inspector, a text-editor, or a vector drawing program to change the image.
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="300"
height="200"
id="svg3910">
<g
transform="translate(0,-852.36218)"
id="layer1">
<rect
width="200"
height="140"
x="92.85714"
y="908.07648"
id="rect3017"
style="opacity:1;fill:#3964c8;stroke:none" />
<path
d="m 254.28571,269.50504 a 74.285713,71.428574 0 1 1 -148.57142,0 74.285713,71.428574 0 1 1 148.57142,0 z"
transform="translate(-95.714287,658.57142)"
id="path3015"
style="opacity:1;fill:#ff64c8;stroke:none" />
</g>
</svg>
SVG basic shapes
As you can see in the example an SVG is made up from basic shapes, that combined, transformed and grouped can form drawings.
The basic shapes are:
- line
<line x1="40" y1="20" x2="80" y2="20" style="stroke-width: 10; stroke: black;"/>
- rectangle
<rect x="50" y="10" width="20" height="40" style="fill: none; stroke: black;"/>
- circle
<circle cx="30" cy="30" r="20" style="stroke: black; fill: red;"/>
- ellipse
<ellipse cx="80" cy="80" rx="20" ry="10" style="stroke: black; fill: none;"/>
- polygon - series of points that describe a geometric area to be filled and outlined
<polygon points="15,10 55, 10 45, 20 5, 20" style="fill: red; stroke: black;"/>
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?)