Ú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
79
0f3a2fe881c742a4dbb5afef5a8f5c0e?s=48 jackub
0
64
0f3a2fe881c742a4dbb5afef5a8f5c0e?s=48 jackub
0
14
0f3a2fe881c742a4dbb5afef5a8f5c0e?s=48 jackub
0
170
0f3a2fe881c742a4dbb5afef5a8f5c0e?s=48 jackub
0
26

Other Decks in Technology

See All in Technology
9e7a653ed313b3da4b263a772bfc5026?s=48 clustervr
0
190
20451295e0cb4dce2b2805b2a61cd92d?s=48 tnk4on
6
830
2b0404a5db1a74f01bf3bf94d142e28c?s=48 alexzhukovich
0
100
7a37d60769f6f3004adee19a8ff2c219?s=48 tunepolo
4
1.4k
B440848190075251e012e587b82f54e2?s=48 czmirror
0
140
9ea422a61c1a69c888786830eee3dbe6?s=48 osonoi
0
130
Ad22fcf5773b906c08330f4d57242212?s=48 inductor
13
2.1k
0251532f4fb413ea1a026efe6eb16b87?s=48 stajima
0
230
8db231d3fe08b46242f6e0e45c95eee1?s=48 darkomesaros
0
120
1f745ff900e1be51aedae18cae76593c?s=48 kurochan
0
1.7k
53850955f15249a1a9dc49df6113e400?s=48 line_developers
1
150
C5e26822fb2aa64410b50eac63ef7d84?s=48 fill9120
1
220

Featured

See All Featured
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
3
400
B47b288784fda77a94aeb234ca743c24?s=48 keavy
101
14k
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
257
16k
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
12
420
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
236
23k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
70
3.3k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
236
9.7k
79acae287842acf29084005533a7fb3b?s=48 hursman
103
9k
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
193
15k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
123
21k
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
93
5k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
196
19k

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/