Courses/Design & Technique-Essential Web Design/Q2/01 - Revision history

Andre at 18:20, 13 November 2017

2017-11-13T18:20:25Z

@@ Line 1: / Line 1: @@
 = SVG =
@@ Line 133: / Line 138: @@
 == svg animations==
 https://css-tricks.com/guide-svg-animations-smil/

2016-11-08T10:56:14Z

SVG: image and text

← Older revision		Revision as of 10:56, 8 November 2016
Line 16:		Line 16:
	* easily included within an HTML document		* easily included within an HTML document
	* syntax similar to HTML		* syntax similar to HTML

			== Export Web friendly SVG in illustrator ==

			[[File:SVG_illustrator.png]]

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

2016-11-04T15:55:37Z

Further

← Older revision		Revision as of 15:55, 4 November 2016
Line 127:		Line 127:
	http://publicationstation.wdka.hro.nl/go-student/Q2/Grotekerkplein/		http://publicationstation.wdka.hro.nl/go-student/Q2/Grotekerkplein/

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

2016-11-01T13:35:41Z

← Older revision		Revision as of 13:35, 1 November 2016
Line 90:		Line 90:

	== 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		http://codepen.io/anon/pen/dpBZqV?editors=1100

2016-11-01T11:36:31Z

← Older revision		Revision as of 11:36, 1 November 2016
Line 120:		Line 120:

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


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

	==Further==		==Further==

2016-10-30T18:49:47Z

svg animations

← Older revision		Revision as of 18:49, 30 October 2016
Line 134:		Line 134:
	* 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?)~~

2016-10-30T18:48:59Z

svg animations

← Older revision		Revision as of 18:48, 30 October 2016
Line 129:		Line 129:
	Examples: https://en.wikipedia.org/wiki/SVG_animation#Examples using SMIL and CSS animation		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

2016-10-30T18:29:05Z

SVG styled by CSS

@@ Line 90: / Line 90: @@
 == 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.
+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 ==

2016-10-30T18:18:38Z

SVG image libraries

← Older revision		Revision as of 18:18, 30 October 2016
Line 149:		Line 149:


			==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==		==SVG image libraries==
	https://openclipart.org/		https://openclipart.org/

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

	==Further==		==Further==

2015-11-17T15:18:59Z

Further

← Older revision		Revision as of 15:18, 17 November 2015
Line 155:		Line 155:

	==Further==		==Further==
	~~This is just the basics~~. ~~We'll not only style SVG drawings with~~ CSS~~, but dynamically:~~		=== svg animations===
	* add drawing elements,		https://css-tricks.com/guide-svg-animations-smil/
	* remove them,
	* turn elements into links,		http://tutorials.jenkov.com/svg/svg-animation.html

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



	* 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,