Difference between revisions of "Courses/Design & Technique-Essential Web Design/Q2/01"
| Line 3: | Line 3: | ||
==What is SVG?== | ==What is SVG?== | ||
SVG (Scalable Vector Graphics) is a vector image format. | 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 | 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 | ||
Revision as of 07:42, 17 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>
dimensions
Notice the height and width arguments in the example above. They determine how large the svg drawing space will be, in pixels.
width="300" height="200"
SVG basic shapes
As you can see in the example above an SVG is made up from basic shapes, that combined, styled, transformed and grouped can form complex 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;"/>
- Text
<text x="20" y="60" style="font-size:14;font-family:serif">test</text>
other SVG elements
<g>
The group element is not a shape, but element that gathers all of its child elements into one block
<use>
The use element gives you a copy-and-paste ability. It can reproduce one element or group many times inside the SVG.
<use xlink:href="#house" x="70" y="100"/>
SVG styled by CSS
Notice that the SVG elements all have an id. This allow us to further style the svg images with CSS in the browser.
To do that we shall integrate the SVG in a HTML file.
Then you can style of the elements. Examples:
- create a CSS rule for with a
:hoverselector for one of elements on the page. - create a CSS rule the whole svg element
- import a custom font and used it to style the
textelement
<!DOCTYPE HTML>
<html>
<head>
<style>
</style>
</head>
<body>
<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 id="layer1">
<rect
width="200"
height="140"
x="0"
y="10"
id="rect3017"
style="fill:#3964c8;stroke:none" />
</g>
<path
d="m 228,125 a 48,51 0 1 1 -97,0 48,51 0 1 1 97.45763,0 z"
id="path3047"
style="fill:#ff60e6;fill-opacity:1;stroke:none" />
</svg>
</body>
</html>
SVG elements as hyperlink
SVG elements can become HTML hyperlinks. The SVG elements only need to be surround by
<a xlink:href="http://nu.nl/">
svg element here
</a>
Note that here we are using xlink:href= and not simply href
You svg element also need to contain the line xmlns:xlink="http://www.w3.org/1999/xlink" in order for links to work.
Further
This is just the basics. We'll not only style SVG drawings with CSS, but dynamically:
- 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?)
