06-svg

SVG

• Scalable Vector Graphics
• 2D vektorová grafika
• XML formát
• při zoomování se neztrácí kvalita obrázku (vektory)
• doporučení W3C
• každý element v SVG obrázku může být animován
• obrázky jsou text
• nástroj pro tvorbu obrázků
  • jakýkoli textový editor
  • vektorový grafický editor s exportem do SVG (Inkscape, Corel Draw, Adobe Illustrator)
• obrázky lze prohledávat fulltextem, lze je komprimovat (velmi efektivně, protože je to text)
• pro složitější obrázky (třeba Path) je vhodné používat grafické editory
• nejde jen o možnost kreslit jednoduché, ale také komplexnější obrázky - viz:
  • v SVG souboru
  • v HTML

Verze dle W3C

• SVG 1.0 became a W3C Recommendation on 4 September 2001.
• SVG 1.1 became a W3C Recommendation on 14 January 2003.
• SVG 1.1 (Second Edition) became a W3C Recommendation on 16 August 2011.

Zdroje

• W3C - primární zdroj
• https://developer.mozilla.org/en-US/docs/Web/SVG
• SVG tutorial na webu w3schools.com
• http://www.adobe.com/devnet/svg.html

Kruh

• Ukázka circle.html
• https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle
• https://www.w3schools.com/graphics/svg_inhtml.asp

Elipsa

• Ukázka ellipse.html
• https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse
• https://www.w3schools.com/graphics/svg_ellipse.asp

Cesta

• Ukázka path.html
• https://www.w3schools.com/graphics/svg_path.asp
• https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path

Polygon

• Ukázka polygon.html
• https://www.w3schools.com/graphics/svg_polygon.asp
• https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon

Linka

• Ukázka line.html
• https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line
• https://www.w3schools.com/graphics/svg_line.asp

Více linek

• Ukázka polyline.html
• https://www.w3schools.com/graphics/svg_polyline.asp
• https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline

Obdélník

• Ukázka rectangle.html
• https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect
• https://www.w3schools.com/graphics/svg_rect.asp

Vložení bitmapového obrázku

• Ukázka image.html

Text

• Ukázka text.html
• https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text
• https://www.w3schools.com/graphics/svg_text.asp
• https://developer.mozilla.org/en/docs/Web/SVG/Attribute/transform

Externí SVG

• Ukázka external-svg.html
• Ukázka exportExample1.html
• v Chrome nefunguje v lokálním prohlížeči kvůli bezpečnosti, je třeba nahrát na server (třeba eso.vse.cz)

Filtry

• Ukázka filters.html
• https://www.w3schools.com/graphics/svg_filters_intro.asp

Animace

• Ukázka animation.html
• http://www.w3.org/TR/SVG/animate.html#AnimateMotionElement
• https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion

Clip-path

• možnost ořezávat SVG objekty i bitmapy
• teoreticky je možné používat ořezávání i v CSS, ale chybí podpora v prohlížečích
• Ukázka imageClipPath.html
• https://coderwall.com/p/blx8kw/svg-clippath-images
• http://sarasoueidan.com/blog/css-svg-clipping/