Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Úvod do SVG

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

Ú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
88
0f3a2fe881c742a4dbb5afef5a8f5c0e?s=48 jackub
0
67
0f3a2fe881c742a4dbb5afef5a8f5c0e?s=48 jackub
0
16
0f3a2fe881c742a4dbb5afef5a8f5c0e?s=48 jackub
0
180
0f3a2fe881c742a4dbb5afef5a8f5c0e?s=48 jackub
0
29

Other Decks in Technology

See All in Technology
9b63847a4c413a2604e1d64e5d595dab?s=48 humank
0
220
Cd823abda454a7a2065fe6fe273ae84b?s=48 viva_tweet_x
5
2.7k
53850955f15249a1a9dc49df6113e400?s=48 line_developers
PRO
0
2.2k
1062ced7020a42219b8f668e14963746?s=48 asaju7142501
0
370
1bdd9c71c3e2bb8fe1fac700c6ba3b34?s=48 yamasaki696
0
350
79fc33e55cacc42beef647541de24d58?s=48 yasuakiomokawa
0
380
79c9f45e8a3cd4bfa9d7292adb3a6dc0?s=48 kraj
0
3.5k
3c635ac67557f954b04d37a24254f436?s=48 becolomochi
0
130
79c9f45e8a3cd4bfa9d7292adb3a6dc0?s=48 kraj
0
5.2k
3009eedce0d0f7ae45987a7bd8f57b85?s=48 nkjzm
1
860
Bb2328fb31ca7e1cbb7aac92ae19208e?s=48 masashible
0
110
40301c0affdf359eaca771713e22b71a?s=48 harshbothra
0
150

Featured

See All Featured
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
7
670
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
500
36k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
295
27k
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
587
200k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
84
7.8k
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
88
3.3k
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
54
1.9k
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
18
650
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
80
4.1k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
1
480
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
241
21k
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
56
5.4k

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/