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

From Publication Station
 
(25 intermediate revisions by the same user not shown)
Line 1: Line 1:
= Examples from previous years=
* https://codepen.io/noellevandijk/pen/MbwXpW
* https://codepen.io/daankuyper/pen/qqbKmO
* https://codepen.io/pntshglnd/pen/pNgKKY
= SVG =
= SVG =


==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
program will draw on the screen.


[[File:vector_raster.gif |Image from  http://apogeesigns.com/faq/what-is-a-vector-graphic/]]
[[File:vector_raster.gif |Image from  http://apogeesigns.com/faq/what-is-a-vector-graphic/]]


==SVG Characteristics ==
==SVG Characteristics ==
SVG is:
* scalable - zooms wont pixelate or degrade the image quality
* 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
* text-based image format - like a webpage you can view and change the source code of an SVG image
Line 18: Line 22:
* syntax similar to HTML
* syntax similar to HTML


== SVG: image and text ==  
== Export Web friendly SVG in illustrator ==
 
[[File:SVG_illustrator.png]]
 
== SVG: image and text ==
[[File:squarecircle.svg]]
 
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'''.
 
<source lang="xml">
<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>
</source>


== SVG elements ==
==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.


== SVG in the browser ==
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==
* <code><g></code>
The group element is not a shape, but element that gathers all of its child elements into one block
* <code><use></code>
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 ==
== SVG styled by CSS ==
http://codepen.io/anon/pen/yamzJo?editors=1000#0
http://codepen.io/anon/pen/dpBZqV?editors=1100
Notice that the SVG elements '''all have an id'''.
This allow us to further style the svg images with CSS in the browser.
You can style of the elements.
Examples:
* create a CSS rule for with a <code>:hover<code> selector 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 <code>text</code> element
== 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 <code>xlink:href=</code> and not simply <code>href</code>
You svg element also need to contain the line <code>xmlns:xlink="http://www.w3.org/1999/xlink" </code> in order for links to work.
==SVG from illustrator to web==
http://creativedroplets.com/export-svg-for-the-web-with-illustrator-cc/
https://helpx.adobe.com/illustrator/how-to/export-svg.html
==SVG image libraries==
https://openclipart.org/
https://commons.wikimedia.org/wiki/Category:SVG




== SVG with custom fonts==
== SVG works ==
http://publicationstation.wdka.hro.nl/go-student/Q2/Grotekerkplein/




This is just the basics. We'll want to manipulate the SVG drawings further, not just style them with CSS, but:
== svg animations==
* add drawing elements,
For creating animations with SVG elements, you must use
* remove them,
CSS keyframes. I
* turn elements into links,
 
See the links for more info.
https://www.impressivewebs.com/demo-files/css3-animated-scene/
 
https://www.smashingmagazine.com/2011/05/an-introduction-to-css3-keyframe-animations/
 
https://css-tricks.com/guide-svg-animations-smil/
 
http://tutorials.jenkov.com/svg/svg-animation.html
 
Examples: https://en.wikipedia.org/wiki/SVG_animation#Examples using SMIL and CSS animation
 
Morphing shape example: https://upload.wikimedia.org/wikipedia/commons/6/6c/Morphing_SMIL.svg
 
* transform the image based on user interaction
* transform the image based on user interaction
* create a new image every time a user visits the site,  
* create a new image every time a user visits the site,  
* etc.
* etc.
To create those actions with need a ''scripting language'' for the browser.
:(WHAT IS A SCRIPTING LANGUAGE?)

Latest revision as of 18:20, 13 November 2017

Examples from previous years

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


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

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

Export Web friendly SVG in illustrator

SVG illustrator.png

SVG: image and text

Squarecircle.svg

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

http://codepen.io/anon/pen/yamzJo?editors=1000#0

http://codepen.io/anon/pen/dpBZqV?editors=1100

Notice that the SVG elements all have an id. This allow us to further style the svg images with CSS in the browser.

You can style of the elements. Examples:

  • create a CSS rule for with a :hover selector 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 text element

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.


SVG from illustrator to web

http://creativedroplets.com/export-svg-for-the-web-with-illustrator-cc/

https://helpx.adobe.com/illustrator/how-to/export-svg.html

SVG image libraries

https://openclipart.org/

https://commons.wikimedia.org/wiki/Category:SVG


SVG works

http://publicationstation.wdka.hro.nl/go-student/Q2/Grotekerkplein/


svg animations

For creating animations with SVG elements, you must use CSS keyframes. I

See the links for more info. https://www.impressivewebs.com/demo-files/css3-animated-scene/

https://www.smashingmagazine.com/2011/05/an-introduction-to-css3-keyframe-animations/

https://css-tricks.com/guide-svg-animations-smil/

http://tutorials.jenkov.com/svg/svg-animation.html

Examples: https://en.wikipedia.org/wiki/SVG_animation#Examples using SMIL and CSS animation

Morphing shape example: https://upload.wikimedia.org/wikipedia/commons/6/6c/Morphing_SMIL.svg

  • transform the image based on user interaction
  • create a new image every time a user visits the site,
  • etc.