Úvod do SVG

0f3a2fe881c742a4dbb5afef5a8f5c0e?s=47 Jakub Mikulas
December 04, 2014
Technology
0
510

Úvod do SVG

4.12. 2014 - http://srazy.info/frontendisti/4991

0f3a2fe881c742a4dbb5afef5a8f5c0e?s=128

Jakub Mikulas

December 04, 2014
Tweet

More Decks by Jakub Mikulas

See All by Jakub Mikulas
0f3a2fe881c742a4dbb5afef5a8f5c0e?s=48 jackub
0
80
0f3a2fe881c742a4dbb5afef5a8f5c0e?s=48 jackub
0
66
0f3a2fe881c742a4dbb5afef5a8f5c0e?s=48 jackub
0
15
0f3a2fe881c742a4dbb5afef5a8f5c0e?s=48 jackub
0
170
0f3a2fe881c742a4dbb5afef5a8f5c0e?s=48 jackub
0
27

Other Decks in Technology

See All in Technology
7bcf6f29a0b9a348fe422a31a4f44752?s=48 cyberblack28
2
170
Cc8a208e174943d1da814783841abd50?s=48 shinodogg
2
230
Eeedbe91225c0207014a46f09eea1d30?s=48 nearmugi
1
150
Cc8a208e174943d1da814783841abd50?s=48 shinodogg
0
170
Ccb58352bdd1be66ebb2daf12ba1b993?s=48 mirie_sd
0
300
E369844a542e163df02efff8c8085782?s=48 yastani
1
120
42d77f62a04b402d6f7cad816a417592?s=48 watawatavoltage
0
190
5e25aec60358948cd53cfcdfd3714c6b?s=48 weblyzard
1
2k
0620564f0125b8b3b7f4fe40c10b8b4e?s=48 tattn
2
780
E783e2d26dc6388730b73ced1348c638?s=48 vkbaba
0
190
7f85cb378a925f12345bf23ebf29977d?s=48 misapipipink
0
100
96d70e4d1094a914c1b6436b9e61962c?s=48 ayehninnkhine
0
100

Featured

See All Featured
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
252
19k
Ba530e786553390f3fb271848485681c?s=48 3n
161
22k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
281
46k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
205
10k
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
79
3.2k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
190
17k
78b475797a14c84799063c7cd073962f?s=48 holman
448
130k
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
336
16k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
155
11k
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
10
630
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
19
1k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
250
11k

Transcript

  1. Úvod do SVG Jakub Mikuláš

  2. K čemu je SVG a proč by mě to mělo

    zajímat? • Vektorová grafika na webu - logotypy, mapy, UI prvky… • Grafy, vizualizace - http://d3js.org • Rozšíření HTML

  3. Co je SVG? • Formát vektorové grafiky • Podporavný v

    prohlížečích • Velmi flexibilní (bitmapy, animace, interakce…)

  4. SVG je text • Minifikace/gzip komprese (grunt, gulp) • Čitelný

    (i pro vyhledávače/čtečky) • Generování/editace • Debugging

  5. ⁵ c:/logo.svg http://example.com/logo.svg

  6. Odkud se berou SVG? Sketch Bacha!

  7. Co lze nakreslit? <rect> <line> <polyline> <circle> <ellipse> <polygon> <svg

    xmlns="http://www.w3.org/2000/svg" version="1.1" width="700px" height="700px"> <rect width="100%" height="100%" fill="#C0FFEE" stroke="#B00B00" stroke-width="30"></rect> </svg>

  8. CSS CAN DO THAT

  9. <filter> <filter id="pictureFilter" > <feGaussianBlur stdDeviation="14" /> <filter /> <filter

    id="gammaFilter"> <feComponentTransfer in="SourceGraphic" result="gammaFilter"> <feFuncR id="channelR" type="identity"></feFuncR> <feFuncG id="channelG" type="gamma" amplitude="1" exponent="0.5"></feFuncG> <feFuncB id="channelB" type="identity"></feFuncB> <feFuncA id="channelA" type="identity"></feFuncA> </feComponentTransfer> </filter> Filtry  lze  kombinovat in out

  10. <pattern> <pattern id="pattern1" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse" > <circle

    cx="10" cy="10" r="10" style="fill: #0000ff" /> </pattern> http://philbit.com/svgpatterns/

  11. CSS ♥ SVG <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="700px" height="700px"> <rect width="100%"

    height="100%" fill="#C0FFEE" stroke="#B00B00" stroke-width="30"></rect> </svg> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="700px" height="700px"> <rect width="100%" height="100%" style="fill: #C0FFEE; stroke: #B00B00; stroke-width: 30;"></rect> </svg> <style>rect {fill: #C0FFEE; stroke: #B00B00; stroke-width: 30;}</style> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="700px" height="700px"> <rect width="100%" height="100%"></rect> </svg>

  12. font,  font-­‐family,  font-­‐size,  font-­‐size-­‐adjust,  font-­‐stretch,   font-­‐style,  font-­‐variant,  font-­‐weight,  direction,

     letter-­‐spacing,   text-­‐decoration,  unincode-­‐bidi,  word-­‐spacing,  visibility,  text-­‐ rendering,  writing-­‐mode,  clip-­‐path,  mask-­‐opacity,  filter,   pointer-­‐events,  image-­‐rendering,  clip,  color,  cursor,  display,   overflow,  clip-­‐rule,  flood-­‐color,  flood-­‐opacity,  stop-­‐opacity,   kerning,  tech-­‐anchor,  color-­‐profile,  color-­‐rendering,  fill,  fill-­‐ opacity,  fill-­‐rule,  marker,  marker-­‐end,  marker-­‐mid,  marker-­‐start,   stroke,  stroke-­‐width,  stop-­‐color,  lighting-­‐color,  enable-­‐ background,  dominant-­‐baseline,  color-­‐interpolation-­‐filters,   color-­‐interpolation,  glyph-­‐orientation-­‐horizontal,  glyph-­‐ orientation-­‐vertical,  shape-­‐rendering,  baseline-­‐shift,  alignment-­‐ baseline,  stroke-­‐miterlimit,  stroke-­‐linejoin,  stroke-­‐linecap,   stroke-­‐dashoffset,  stroke-­‐dasharray,  stroke-­‐opacity http://slides.com/sarasoueidan/styling-animating-svgs-with-css--2 http://bit.ly/1ypOBeM

  13. viewBox • <svg> má width a height v DOMu •

    Atribut viewBox se používá pro interní x y koordináty <svg width="500" height="200" viewBox="0 0 50 20" > <rect x="20" y="10" width="10" height="5" style="stroke: #000000; fill:none;"/> </svg>
  14. None

  15. Inline nebo externí SVG • Inline SVG (s textem) je

    čitelné pro roboty, čtečky… • Externí SVG dokáže prohlížeč uložit do cache • Inline SVG je možné stylovat CSS a ovládat JS • Externí SVG jde použít jako background elementů <img src="obrazek.svg" /> <body> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" fill="#BADA55" /> </svg> </body>

  16. http://snapsvg.io

  17. Testujte  SVG

  18. Rebekapitulace • SVG vytvořte buď v editoru nebo pomocí knihovny

    (SnapSVG, Raphael, D3.js…) • Pokud můžete, tak optimalizujte: svg-min (grunt/gulp), gzip, odstraňte nedůležité vrstvy

  19. FYI • https://developer.mozilla.org/en-US/docs/Web/SVG • http://tutorials.jenkov.com/svg/ • http://tympanus.net/codrops/2014/08/19/making-svgs-responsive- with-css/