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

Scalable Vector Graphics - SVG와 함께하는 프런트엔드 개발

Cf84ea78e6d365cd813d571dd9e96772?s=47 Coderifleman
January 15, 2021
How-to & DIY
2
720

Scalable Vector Graphics - SVG와 함께하는 프런트엔드 개발

Cf84ea78e6d365cd813d571dd9e96772?s=128

Coderifleman

January 15, 2021
Tweet

More Decks by Coderifleman

See All by Coderifleman
Cf84ea78e6d365cd813d571dd9e96772?s=48 uyeong
3
230
Cf84ea78e6d365cd813d571dd9e96772?s=48 uyeong
4
550

Other Decks in How-to & DIY

See All in How-to & DIY
E6c980b93d086e757643971b318a40a9?s=48 maepu
0
280
308698f0f90a4a88c8b82432afacef2a?s=48 kyontan
0
1.9k
79fc33e55cacc42beef647541de24d58?s=48 yasuakiomokawa
1
110
59815f4389b285c6d17343544f4d27f8?s=48 clairedelune
2
230
13baeabe6f414defa311a640ea09c943?s=48 taokiuhuru
0
190
1817c3d5995710d04506a17cc9b5c9ba?s=48 runrunsan
1
380
9193cc1686202e97bda2865af2d3b010?s=48 carloscarlitos
0
120
03089d9ce3bc29cb15ccb3dc5017b900?s=48 ksasao
0
290
32fc21c821f829e470225311c7530832?s=48 n0bisuke2
0
170
828d8c35d49ece8a6eac9718fefdb563?s=48 sobarecord
1
110
9260cf8a1a6dd81ac381c56547f589d5?s=48 bigtree
0
580
D907136acebc72f1df878541b26f271a?s=48 pichuang
0
2.4k

Featured

See All Featured
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
43
2.4k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
55
4.6k
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
85
5k
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
13
920
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
207
38k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
32
1.1k
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
39
1.3k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
260
24k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
121
16k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
17
2k
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
291
110k
245cee81a9c424266e5e401d844ea881?s=48 lara
26
3.2k

Transcript

  1. Scalable Vector Graphics SVG৬ ೣԋೞח ೐۠౟ূ٘ ѐߊ

  2. • SVGח “2ରਗ" ӝ߈ ߭ఠ ഋधਸ ਤೠ
 XML ӝ߈੄ ݃௼স

    ঱য. • যځೠ ௼ӝب ੉૕х হ੉ ۪؊݂
 ೡ ࣻ ੓ח Ӓܿਸ “ӝࣿ”ೞӝ ਤ೧ 
 Ҋউػ ఫझ౟ ӝ߈੄ ѐߑഋ ਢ ಴ળ SVGۆ ޖ঺ੋо? MDN - SVG: Scalable Vector Graphics https://developer.mozilla.org/en-US/docs/Web/SVG

  3. SVG ಴ળച അ੤

  4. • Recommendation Track • Working Draft (WD)
 ୡউ • Candidate

    Recommendation (CR)
 റࠁӂҊউ • Proposed Recommendation (PR)
 ઁউӂҊউ • W3C Recommendation(REC) 
 ӂҊউ • Note Track W3C ಴ળച ઁ੿ 3 https://www.w3.org/wiki/Process2020 https://www.w3.org/2020/Process-20200915

  5. W3Cо Ӓ ݯߡ ࡺ݅ ইפۄ ؀઺, ׮ܲ ӝࣿ ױ୓ ١

    ৈ۞ ழޭפ౭ী Ѩ షܳ ߉ӝ ਤ೧ ҕѐೠ ޙࢲ Working Draft 3 https://www.w3.org/wiki/Process2020 https://www.w3.org/2020/Process-20200915

  6. ਕఊ Ӓܛ੄ ӝࣿ੸ ਃҳ ࢎ೦ਸ ݅઒ೞѢա 
 ਕఊ Ӓܛ੉ ਬ૑ೞ૑

    ঋҊ ҟߧਤೠ
 Ѩషܳ ߉਷ ӂ੢ ࢎ೦ਸ प૕੸ਵ۽ 
 ࣻ੿ೞח ޙࢲ Candidate 
 Recommendation 3 https://www.w3.org/wiki/Process2020 https://www.w3.org/2020/Process-20200915

  7. W3C ӂ੢ ࢎ೦੉ غӝী ୽࠙ೠ ಿ૕۽
 थੋ ػ ޙࢲ. ӂҊউਵ۽

    ѱदೞѢա ୶о ੘সਸ ਤ೧ ਕఊ Ӓܛী ߈ജ
 ژח ತӝ ೡ Ѫਸ ӂҊ ೡ ࣻ੓ח 
 ੗ޙਤਗഥীࢲ ҕधਵ۽ Ѩష. Proposed 
 Recommendation 3 https://www.w3.org/wiki/Process2020 https://www.w3.org/2020/Process-20200915

  8. ҟߧਤೠ Ѩష৬ ೤੄ ੉റ W3C ߂ 
 Ӓ ഥਗٜ੄ थੋਸ

    ߉਷ ࢎন ߂ ૑ஜ W3Cח ਢ ಴ળਵ۽ ӂ੢ ࢎ೦ਸ ҟߧਤೞѱ ߓನ ೡ Ѫਸ ӂ੢ 3 https://www.w3.org/wiki/Process2020 https://www.w3.org/2020/Process-20200915 W3C Recommendation

  9. 1999֙ ୡ W3Cীࢲ ࢎন ѐߊ द੘ 1999֙ 2ਘ 11ੌ SVG

    WD ҕѐ

  10. 1999֙ 7ਘ 30ੌ SVG 1.0 WD ҕѐ 2000֙ 8ਘ 2ੌ

    SVG 1.0 CR ҕѐ 2001֙ 9ਘ 4ੌ SVG 1.0 REC ҕѐ SVG 1.0 is A Superseded Recommendation

  11. 2001֙ 10ਘ 30ੌ SVG 1.1 FWD ҕѐ 2002֙ 4ਘ 30ੌ

    SVG 1.1 CR ҕѐ 2002֙ 11ਘ 15ੌ SVG 1.1 PR ҕѐ 2003֙ 1ਘ 14ੌ SVG 1.1 REC ҕѐ

  12. 2010֙ 6ਘ 22ੌ SVG 1.1 SE WD ҕѐ 2011֙ 6ਘ

    9ੌ SVG 1.1 SE PR ҕѐ 2011֙ 8ਘ 16ੌ SVG 1.1 SE REC ҕѐ

  13. 2012֙ 8ਘ 28ੌ SVG 2.0 FWD ҕѐ 2016֙ 9ਘ 15ੌ

    SVG 2.0 CR ҕѐ അ੤ө૑ ࢎন ଼੿ ઺

  14. SVG 1.0 അ੤ ঌҊ੓ח SVG੄ ӝࠄ بഋ, paths, গפݫ੉࣌, DOM

    ੋఠಕ੉झ ١ Ѣ੄ 
 ݽٚ ӝמ ଼੿

  15. SVG 1.1 ౠ߹൤ ߄Ո ղਊ਷ হ਺.
 1.0 ࢎনਸ ݽٕച ೠ

    ߡ੹ SVG 1.1 Mobile SVG Pro f i les: 
 SVG Tiny(ݽ߄ੌ) and 
 SVG Basic(PDA)

  16. SVG 1.1 SE য়ఎ੗ ࣻ੿, ੿য়಴ ୶о
 ࢸݺҳ ࣻ੿ ߂

    ୶о
 ࢜۽਍ ӝמ ୶оח হ਺

  17. SVG 2.0 1.1੄ ੌࠗ ӝמਸ ࠺ӂ੢ ೞѢա 
 HTML5 ߂

    Web Open Font Format 
 ӝמਸ ా೤ • glyph, altGlyph э਷ ӖԜ ਃࣗ ઁѢ • HTML5 data-*, tabindex ١੄ ࣘࢿ ୶о • SVG Paths, SVG Makers, SVG Strokes ١ झಖ ݽٕച

  18. SVGо ೙ਃೠо

  19. Canvas • ݺ۸ഋਵ۽ Ӓې೗ ਃࣗ ఐ࢝ ߂ ઑ੘ • ݺ۸ഋਵ۽

    झఋੌ ߂ ࢚࢝ ੸ਊ • Frame or Timing ੉߮౟ ӝ߈ গפݫ੉࣌ • Ӓې೗ ਃࣗ੄ ఐ࢝ ߂ ઑ੘ਸ ਤ೧ ё୓ച ߂ ҙܻ

  20. SVG • 2ରਗ ߭ఠ Ӓې೗ਸ ࢶ঱੸ਵ۽ ӝࣿ • CSSܳ ഝਊೠ

    झఋੌ݂ оמ • SMILਸ ഝਊ೧ গפݫ੉࣌ ࢶ঱੸ਵ۽ ӝࣿ • ੊ࣼೠ DOMਵ۽ Ӓې೗ ਃࣗ ఐ࢝ ߂ ઑ੘ Canvas • ݺ۸ഋਵ۽ Ӓې೗ ਃ… • ݺ۸ഋਵ۽ झఋੌ ߂… • Frame or Timing ੉… • Ӓې೗ ਃࣗ੄ ఐ࢝ ߂…

  21. SVG • 2ରਗ ߭ఠ Ӓې೗ਸ ࢶ঱੸ਵ۽ ӝࣿ • CSSܳ ഝਊೠ

    झఋੌ݂ оמ • SMILਸ ഝਊ೧ গפݫ੉࣌ ࢶ঱੸ਵ۽ ӝࣿ • ੊ࣼೠ DOMਵ۽ Ӓې೗ ਃࣗ ఐ࢝ ߂ ઑ੘ Canvas • ݺ۸ഋਵ۽ Ӓې೗ ਃ… • ݺ۸ഋਵ۽ झఋੌ ߂… • Frame or Timing ੉… • Ӓې೗ ਃࣗ੄ ఐ࢝ ߂…

  22. SVG • 2ରਗ ߭ఠ Ӓې೗ਸ ࢶ঱੸ਵ۽ ӝࣿ • CSSܳ ഝਊೠ

    झఋੌ݂ оמ • SMILਸ ഝਊ೧ গפݫ੉࣌ ࢶ঱੸ਵ۽ ӝࣿ • ੊ࣼೠ DOMਵ۽ Ӓې೗ ਃࣗ ఐ࢝ ߂ ઑ੘ Canvas • ݺ۸ഋਵ۽ Ӓې೗ ਃ… • ݺ۸ഋਵ۽ झఋੌ ߂… • Frame or Timing ੉… • Ӓې೗ ਃࣗ੄ ఐ࢝ ߂… ࠄ૕੸ਵ۽ 2ରਗ Ӓې೗੉ӝ ٸޙী ೞ٘ਝয оࣘ੉ ੸ਊغ૑ ঋ਺(࠳ۄ਋੷ ҳഅী ٮۄ ׮ܳ ࣻח ੓਺) z ઝ಴о হਵ޲۽ translate3d, perspective ١ 3D ബҗ ੸ ਊ੉ оמೞ૑ ঋ਺ (औѱ)

  23. SVG • 2ରਗ ߭ఠ Ӓې೗ਸ ࢶ঱੸ਵ۽ ӝࣿ • CSSܳ ഝਊೠ

    झఋੌ݂ оמ • SMILਸ ഝਊ೧ গפݫ੉࣌ ࢶ঱੸ਵ۽ ӝࣿ • ੊ࣼೠ DOMਵ۽ Ӓې೗ ਃࣗ ఐ࢝ ߂ ઑ੘ Canvas • ݺ۸ഋਵ۽ Ӓې೗ ਃ… • ݺ۸ഋਵ۽ झఋੌ ߂… • Frame or Timing ੉… • Ӓې೗ ਃࣗ੄ ఐ࢝ ߂… ࠄ૕੸ਵ۽ 2ରਗ Ӓې೗੉ӝ ٸޙী ೞ٘ਝয оࣘ੉ ੸ਊغ૑ ঋ਺(࠳ۄ਋੷ ҳഅী ٮۄ ׮ܳ ࣻח ੓਺) z ઝ಴о হਵ޲۽ translate3d, perspective ١ 3D ബҗ ੸ ਊ੉ оמೞ૑ ঋ਺ Ҋࢿמ੉ ೙ਃೞݶ Canvas 3D ಴അ੉ ೙ਃೞ׮ݶ HTML & Canvas (औѱ)

  24. ࢎ۹ࣗѐ

  25. Insight of flex

  26. ࡈܻ ٜ݅যঠ ೮Ҋ, উ੿੸੉ঠ ೮Ҋ, ؘ੉ఠо ࠂ੟ೞ૑ ঋওҊ, ର౟ ஸۢ੉

    ױࣽ೮׮.

  27. ࡈܻ ٜ݅যঠ ೮Ҋ, উ੿੸੉ঠ ೮Ҋ, ؘ੉ఠо ࠂ੟ೞ૑ ঋওҊ, ର౟ ஸۢ੉

    ױࣽ೮׮. ޖ঺ࠁ׮

  28. ٣੗੉ց੄ Ѿҗޛਸ زੌೞѱ 
 ҳഅೞחؘ ݾ಴ܳ م
 (ೱറ ࠂ੟ೠ ର౟۽

    ߊ੹ೡ оמࢿ ֫਺)

  29. ٣੗੉ց੄ Ѿҗޛਸ زੌೞѱ 
 ҳഅೞחؘ ݾ಴ܳ م
 (ೱറ ࠂ੟ೠ ର౟۽

    ߊ੹ೡ оמࢿ ֫਺)

  30. • பߡझ ӝ߈ ର౟ ۄ੉࠳۞ܻ • ழझథ झఋੌ݂੉ য۰਑ SVG

    • SVG ӝ߈ ର౟ ۄ੉࠳۞ܻ • CSS৬ DOMਸ ੉ਊ೧ 
 ழझథ झఋੌ݂ оמ Canvas ೱറ ࠂ੟ೠ ର౟۽ ߊ੹ -> ର౟ ۄ੉࠳۞ܻ ೙ਃ Ӓۢীب ৈ੹൤ ٣੗੉ց੄ Ѿҗޛਸ زੌೞѱ ҳഅೞҊ र׮ (100%ח ইפۄب оמೠೠ)

  31. ੉Ѫ݅ ঌݶ ׼नب SVG Ҋࣻ

  32. SVGSVGElement <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg " viewBox="x

    y width height " width="(಩ ૑੿) " height="(֫੉ ૑੿) " > (ৈӝী SVG ղਊਸ ੘ࢿ ) </svg>

  33. SVGSVGElement <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg " viewBox="x

    y width height " width="(಩ ૑੿) " height="(֫੉ ૑੿) " > (ৈӝী SVG ղਊਸ ੘ࢿ ) </svg> SVGח XML ӝ߈ ݃௼স ঱য SVG ੉ܴ ҕр SVG ಴द ߧਤ ײח కӒ۽ ݃ޖܻ(<circle />) ؀ޙ੗৬ ࣗޙ੗ ҳ߹ ٸٸ۽ ੉ܴ ҕр ೙ਃ

  34. viewBox 0, 0(ਗ੼) 85 60 500 300 ಴द ߧਤ <sv

    g xmlns="http://www.w3.org/2000/svg " viewBox="60 85 500 300 " > (ৈӝী SVG ղਊਸ ੘ࢿ ) </svg > SVG੄ ਗ੼਷ ೦࢚ ઝஏ ࢚ױী ਤ஖

  35. viewBox 0, 0(ਗ੼) ݅ড ߃ীࢲ ࢲࢲ൤ ৢۄয়ח Ӓې೐ܳ
 ٜ݅Ҋ र׮ݶ?

    <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 500 300 " > <rect width="50" height="300" x="225" y=“?" fill="white"/ > </svg> 500 300

  36. viewBox ݅ড ߃ীࢲ ࢲࢲ൤ ৢۄয়ח Ӓې೐ܳ
 ٜ݅Ҋ र׮ݶ? 0, 0(ਗ੼)

    300 <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 500 300 " > <rect width="50" height="300" x="225" y=“300” fill="white"/ > </svg> 300 500 225 ಴द ߧਤ ߄Ӵী ੓ח Ѥ ࠁ੉૑ ঋ਺

  37. viewBox ݅ড ߃ীࢲ ࢲࢲ൤ ৢۄয়ח Ӓې೐ܳ
 ٜ݅Ҋ र׮ݶ? 0, 0(ਗ੼)

    300 <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 500 300 " > <rect width="50" height="300" x="225" y=“200” fill="white"/ > </svg> 200 500 225 ಴द ߧਤ ߄Ӵী ੓ח Ѥ ࠁ੉૑ ঋ਺

  38. viewBox ݅ড ߃ীࢲ ࢲࢲ൤ ৢۄয়ח Ӓې೐ܳ
 ٜ݅Ҋ र׮ݶ? 0, 0(ਗ੼)

    300 <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 500 300 " > <rect width="50" height="300" x="225" y=“100” fill="white"/ > </svg> 100 500 225 ಴द ߧਤ ߄Ӵী ੓ח Ѥ ࠁ੉૑ ঋ਺

  39. viewBox ݅ড ߃ীࢲ ࢲࢲ൤ ৢۄয়ח Ӓې೐ܳ
 ٜ݅Ҋ र׮ݶ? 0, 0(ਗ੼)

    300 <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 500 300 " > <rect width="50" height="300" x="225" y=“0” fill="white"/ > </svg> 500 ಴द ߧਤ ߄Ӵী ੓ח Ѥ ࠁ੉૑ ঋ਺

  40. viewBox 0, 0(ਗ੼) SVG div HTML 300 500

  41. viewBox transform: rotate(45deg) 0, 0(ਗ੼) SVG div HTML 300 500

  42. transform: rotate(45deg) 0, 0(ਗ੼) SVG div HTML 300 500 viewBox

  43. viewBox transform: rotate(45deg)
 transform-origin: 250px 150px SVG 0, 0(ਗ੼) 300

    500 150 250

  44. ਗ੼਷ ݽٚ SVG ਃࣗ, ࣘࢿ ઝ಴ ҅࢑੄ Ӕਗ. SVGח HTML੉

    ইפ׮

  45. Basic Shapes line, rect, circle, ellipses, poly line, polygon

  46. line ૒ࢶਸ Ӓܻ੗ <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg

    " viewBox="0 0 300 200 " > <line x1="80" y1="50" x2="450" y2="250" stroke="white" / > </svg> 0, 0(ਗ੼) 500 300

  47. line <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0

    0 300 200 " > <line x1="80" y1="50" x2="450" y2="250" stroke="white" / > </svg> ૒ࢶਸ Ӓܻ੗ x1, y1ח द੘੼੄ ઝ಴ܳ աఋն(moveto) x2, y2ח ՘੼੄ ઝ಴ܳ աఋն(lineto) ઝ಴ ૑੿ ױਤ۽ em, ex, px, in, cm, mm, pt, pc ١ ഝਊ 0, 0(ਗ੼) 500 300 50 80 250 450

  48. ࢶ੄ ࢲध ࢶ੄ ࢝: stroke stroke="red" stroke="#FF0000 " stroke="#F00" stroke="rgb(255,0,0)

    " stroke="rgb(100%, 0%, 0%)" storke="rgba(100%, 0%, 0%, 0.5) "

  49. ࢶ੄ ࢲध ࢶ੄ Ҹӝ: stroke-width <?xml version="1.0" encoding="utf-8"? > <sv

    g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 300 200 " > <line x1="50" y1="70" x2="450" y2="70" stroke="white" stroke-width="4" / > <line x1="50" y1="150" x2="450" y2="150" stroke="white" stroke-width="10" / > <line x1="50" y1="230" x2="450" y2="230" stroke="white" stroke-width="0.5cm" / > </svg> 0, 0(ਗ੼) 500 300

  50. ࢶ੄ ࢲध ࢶ੄ ՘ ഋక: stroke-linecap <?xml version="1.0" encoding="utf-8"? >

    <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 300 200 " > <line x1="50" y1="70" x2="450" y2="70 " stroke="white" stroke-width="25" stroke-linecap="butt" / > <line x1="50" y1="150" x2="450" y2="150 " stroke="white" stroke-width="25" stroke-linecap="round" / > <line x1="50" y1="230" x2="450" y2="230 " stroke="white" stroke-width="25" stroke-linecap="square" / > </svg> 0, 0(ਗ੼) 500 300

  51. ࢶ੄ ࢲध ࢶ੄ ՘ ഋక: stroke-linecap 0, 0(ਗ੼) 500 300

    butt round square

  52. ࢶ੄ ࢲध ੼ࢶ ૑੿: stroke-dasharray <?xml version="1.0" encoding="utf-8"? > <sv

    g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 300 200 " > <line x1="50" y1="70" x2="450" y2="70 " stroke="white" stroke-width="5" stroke-dasharray="10,4" / > <line x1="50" y1="150" x2="450" y2="150 " stroke="white" stroke-width="5" stroke-dasharray="20,7" / > <line x1="50" y1="230" x2="450" y2="230 " stroke="white" stroke-width="5" stroke-dasharray="40,7,10,7" / > </svg> 0, 0(ਗ੼) 500 300

  53. ࢶ੄ ࢲध ੼ࢶ ૑੿: stroke-dasharray <?xml version="1.0" encoding="utf-8"? > <sv

    g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 300 200 " > <line x1="50" y1="70" x2="450" y2="70 " stroke="white" stroke-width="5" stroke-dasharray="10,4" / > <line x1="50" y1="150" x2="450" y2="150 " stroke="white" stroke-width="5" stroke-dasharray="20,7" / > <line x1="50" y1="230" x2="450" y2="230 " stroke="white" stroke-width="5" stroke-dasharray="40,7,10,7" / > </svg> 0, 0(ਗ੼) 500 300 ࢶ࠙੄ ӡ੉ рѺ੄ ӡ੉

  54. ࢶ੄ ࢲध ੼ࢶ੄ द੘ ਤ஖: stroke-dashoffset <?xml version="1.0" encoding="utf-8"? >

    <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 300 200 " > <line x1="50" y1="70" x2="450" y2="70" 
 stroke="white" stroke-width="5 " stroke-dasharray="80,10" / > <line x1="50" y1="150" x2="450" y2="150" 
 stroke="white" stroke-width="5 " stroke-dasharray="80,10" stroke-dashoffset="30" / > <line x1="50" y1="230" x2="450" y2="230" 
 stroke="white" stroke-width="5 " stroke-dasharray="80,10" stroke-dashoffset="60" / > </svg> 0, 0(ਗ੼) 500 300

  55. ࢶ੄ ࢲध ੼ࢶ੄ द੘ ਤ஖: stroke-dashoffset <?xml version="1.0" encoding="utf-8"? >

    <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 300 200 " > <line x1="200" y1="150" x2="450" y2="150" 
 stroke="white" stroke-width="8 " stroke-dasharray="80,10" stroke-dashoffset="0" / > </svg> 0, 0(ਗ੼) 500 300

  56. ࢶ੄ ࢲध ੼ࢶ੄ द੘ ਤ஖: stroke-dashooffset <?xml version="1.0" encoding="utf-8"? >

    <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 300 200 " > <line x1="200" y1="150" x2="450" y2="150" 
 stroke="white" stroke-width="8 " stroke-dasharray="80,10" stroke-dashoffset=“30" / > </svg> 0, 0(ਗ੼) 500 300 30

  57. ࢶ੄ ࢲध ੼ࢶ੄ द੘ ਤ஖: stroke-dashooffset <?xml version="1.0" encoding="utf-8"? >

    <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 300 200 " > <line x1="200" y1="150" x2="450" y2="150" 
 stroke="white" stroke-width="8 " stroke-dasharray="80,10" stroke-dashoffset=“60" / > </svg> 0, 0(ਗ੼) 500 300 60

  58. ࢶ੄ ࢲध ࢶ੄ ైݺب: stroke-opacity <?xml version="1.0" encoding="utf-8"? > <sv

    g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 300 200 " > <line x1="50" y1="70" x2="450" y2="70" 
 stroke="white" stroke-width="20 " stroke-opacity="1.0" / > <line x1="50" y1="150" x2="450" y2="150" stroke="white" stroke-width="8 " stroke-opacity="0.6" / > <line x1="50" y1="230" x2="450" y2="230" stroke="white" stroke-width="8 " stroke-opacity="0.3" / > </svg> 0, 0(ਗ੼) 500 300

  59. rect ࢎпഋਸ Ӓܻ੗ <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg

    " viewBox="0 0 300 200 " > <rect x="30" y="50" width="350" height="150 " fill="#FF9933" stroke="white" stroke-width="5" 
 stroke-dasharray="20,7" / > <rect x="300" y="120" width="150" height="150" fill="#0033CC" / > </svg> 0, 0(ਗ੼) 500 300

  60. rect ࢎпഋਸ Ӓܻ੗ <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg

    " viewBox="0 0 300 200 " > <rect x="30" y="50" width="350" height="150 " fill="#FF9933" stroke="white" stroke-width="5" 
 stroke-dasharray="20,7" / > <rect x="300" y="120" width="150" height="150" fill="#0033CC" / > </svg> 0, 0(ਗ੼) 500 300 x, y: ৽ଃ ࢚ױ੄ ઝ಴ width: ࢎпഋ੄ ց࠺ height: ࢎпഋ੄ ֫੉

  61. بഋ੄ ࢲध ଻਋ӝ ࢝: fill <?xml version="1.0" encoding="utf-8"? > <sv

    g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 300 200 " > <rect x="30" y="50" width="350" height="150 " fill="#FF9933" stroke="white" stroke-width="5" 
 stroke-dasharray="20,7" / > <rect x="300" y="120" width="150" height="150" fill="#0033CC" / > </svg> 0, 0(ਗ੼) 500 300

  62. بഋ੄ ࢲध ଻਋ӝ ࢝ ైݺب: fill-opacity <?xml version="1.0" encoding="utf-8"? >

    <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 300 200 " > <rect x="30" y="50" width="350" height="150 " fill="#FF9933" stroke="black" 
 stroke-width="5" stroke-dasharray="20,7" / > <rect x="300" y="120" width="150" height="150 " fill="#0033CC" fill-opacity="0.5" / > </svg> 0, 0(ਗ੼) 500 300

  63. بഋ੄ ࢲध وӔ ݽࢲܻ: rx, ry <?xml version="1.0" encoding="utf-8"? >

    <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 300 200 " > <rect x="30" y="50" width="350" height="150" fill="#FF9933" rx="30" ry="30" stroke="white" stroke-width="5" / > </svg> 0, 0(ਗ੼) 500 300 rx: x୷ ߑೱ੄ ߈૑ܴ ry: y୷ ߑೱ੄ ߈૑ܴ

  64. circle ਗਸ Ӓܻ੗ <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg

    " viewBox="0 0 300 200 " > <circle cx="150" cy="180" r="100" fill="blue" / > <circle cx="300" cy="80" r="40" fill="yellow" / > </svg> 0, 0(ਗ੼) 500 300

  65. circle ਗਸ Ӓܻ੗ <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg

    " viewBox="0 0 300 200 " > <circle cx="150" cy="180" r="100" fill="blue" / > <circle cx="300" cy="80" r="40" fill="yellow" / > </svg> 0, 0(ਗ੼) 500 300 cx, cy: ਗ੄ ઺ब ઝ಴ r: ߈૑ܴ

  66. ellipse ఋਗਸ Ӓܻ੗ <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg

    " viewBox="0 0 300 200 " > <ellipse cx="110" cy="150" rx="80" ry="120" fill="#6699CC" stroke="#333399" stroke-width="10" / > <ellipse cx="350" cy="150" rx="120" ry="80" fill="#FFFF00" stroke="white" stroke-width="7" stroke-linecap="round" stroke-dasharray="0.01, 12" / > </svg> 0, 0(ਗ੼) 500 300

  67. ellipse ఋਗਸ Ӓܻ੗ <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg

    " viewBox="0 0 300 200 " > <ellipse cx="110" cy="150" rx="80" ry="120" fill="#6699CC" stroke="#333399" stroke-width="10" / > <ellipse cx="350" cy="150" rx="120" ry="80" fill="#FFFF00" stroke="white" stroke-width="7" stroke-linecap="round" stroke-dasharray="0.01, 12" / > </svg> 0, 0(ਗ੼) 500 300 cx, cy: ਗ੄ ઺ब ઝ಴ rx: x୷ ߑೱ੄ ߈૑ܴ ry: y୷ ߑೱ੄ ߈૑ܴ

  68. polyline ԃ਷ࢶਸ Ӓܻ੗ <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg

    " viewBox="0 0 300 200 " > <polyline points="20,250 120,80 220,250 " fill="none" stroke="white" stroke-width="5" / > <polyline points="300,50 450,140 350,140 450,250 300,250 " fill="none" stroke="blue" stroke-width="5" / > </svg> 0, 0(ਗ੼) 500 300 ՘੼ীࢲ द੘੼ਵ۽ ੉য૑ח ࢶ਷ ࢤۚ

  69. polyline ԃ਷ࢶਸ Ӓܻ੗ <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg

    " viewBox="0 0 300 200 " > <polyline points="20,250 120,80 220,250 " fill="none" stroke="white" stroke-width="5" / > <polyline points="300,50 450,140 350,140 450,250 300,250 " fill="none" stroke="blue" stroke-width="5" / > </svg> 0, 0(ਗ੼) 500 300 points: п ԙ૑੼ ઝ಴ ৌѢ ՘੼ীࢲ द੘੼ਵ۽ ੉য૑ח ࢶ਷ ࢤۚ

  70. polygon ׮пഋਸ Ӓܻ੗ <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg

    " viewBox="0 0 300 200 " > <polygon points="20,250 120,80 220,250 " fill="blue" stroke="white " stroke-width="5" / > <polygon points="300,50 450,140 350,14 0 450,250 300,250 " fill="green" stroke="blue " stroke-width="5" / > </svg> 0, 0(ਗ੼) 500 300 ՘੼ীࢲ द੘੼ਵ۽ ੉য૑ח ࢶਸ Ӓܿ

  71. polygon ׮пഋਸ Ӓܻ੗ <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg

    " viewBox="0 0 300 200 " > <polygon points="20,250 120,80 220,250 " fill="blue" stroke="white " stroke-width="5" / > <polygon points="300,50 450,140 350,14 0 450,250 300,250 " fill="green" stroke="blue " stroke-width="5" / > </svg> 0, 0(ਗ੼) 500 300 points: п ԙ૑੼ ઝ಴ ৌѢ ՘੼ীࢲ द੘੼ਵ۽ ੉য૑ח ࢶਸ Ӓܿ

  72. بഋ੄ ࢲध ݽࢲܻ ഋక: stroke-linejoin <?xml version="1.0" encoding="utf-8"? > <sv

    g xmlns="http://www.w3.org/2000/svg " viewBox="0 0 300 200 " > <polyline points="40,50 140,250 40,250 " fill="none" stroke="white" stroke-width="30 " stroke-linejoin="miter" / > <polyline points="200,50 300,250 200,250 " fill="none" stroke="white" stroke-width="30 " stroke-linejoin="round" / > <polyline points="360,50 460,250 360,250 " fill="none" stroke="white" stroke-width="30 " stroke-linejoin="bevel" / > </svg> 0, 0(ਗ੼) 500 300

  73. <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0

    300 200 " > <polyline points="40,50 140,250 40,250 " fill="none" stroke="white" stroke-width="30 " stroke-linejoin="miter" / > <polyline points="200,50 300,250 200,250 " fill="none" stroke="white" stroke-width="30 " stroke-linejoin="round" / > <polyline points="360,50 460,250 360,250 " fill="none" stroke="white" stroke-width="30 " stroke-linejoin="bevel" / > </svg> 0, 0(ਗ੼) 500 300 ݽࢲܻ ഋక: stroke-linejoin بഋ੄ ࢲध

  74. <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0

    300 200 " > <polyline points="40,50 140,250 40,250 " fill="none" stroke="white" stroke-width="30 " stroke-linejoin="miter" / > <polyline points="200,150 300,250 200,250 " fill="none" stroke="white" stroke-width="30 " stroke-linejoin="miter" / > <polyline points="360,200 460,250 360,250 " fill="none" stroke="white" stroke-width="30 " stroke-linejoin="miter" / > </svg> 0, 0(ਗ੼) 500 300 ݽࢲܻ ഋక: stroke-linejoin بഋ੄ ࢲध

  75. <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0

    300 200 " > <polyline points="40,50 140,250 40,250 " fill="none" stroke="white" stroke-width="30 " stroke-linejoin="miter" / > <polyline points="200,150 300,250 200,250 " fill="none" stroke="white" stroke-width="30 " stroke-linejoin="miter" / > <polyline points="360,200 460,250 360,250 " fill="none" stroke="white" stroke-width="30 " stroke-linejoin="miter " stroke-miterlimit="5" / > </svg> 0, 0(ਗ੼) 500 300 ݽࢲܻ ഋక: stroke-linejoin بഋ੄ ࢲध

  76. <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0

    300 200 " > <polygon points="50,50 450,50 450,25 0 150,250, 150,100 300,10 0 300,200 50,200 " fill="#FF9966" stroke="white " fill-rule="nonzero" stroke-width="10" / > </svg> 0, 0(ਗ੼) 500 300 ࢝ ଻਋ח ߑߨ: fill-rule بഋ੄ ࢲध

  77. <?xml version="1.0" encoding="utf-8"? > <sv g xmlns="http://www.w3.org/2000/svg " viewBox="0 0

    300 200 " > <polygon points="50,50 450,50 450,25 0 150,250, 150,100 300,10 0 300,200 50,200 " fill="#FF9966" stroke="white " fill-rule=“evenodd" stroke-width="10" / > </svg> 0, 0(ਗ੼) 500 300 ࢝ ଻਋ח ߑߨ: fill-rule بഋ੄ ࢲध

  78. <line /> <polyline /> <circle /> <circle />

  79. ب֊ ର౟ ٜ݅যࠁӝ

  80. ՘ਵ۽

  81. ׮ܖ૑ ঋ਷ Ѫ • path, text, span, image, g, use,

    a • Ӓۄؘ੉࣌җ ಁఢ • ௿݀ೝҗ ݃झ௼ • SVG Filter Effects • SMIL(झ݃ੌ) • झఋੌद౟۽ झఋੌ݂ ೞח ߨ • ੗߄झ௼݀౟۽ بഋਸ ઑ੘, ߸ഋೞח ߨ

  82. ೞ૑݅, ӝࠄ بഋ݅ ঌইب рױೠ ର౟ ੿بח ୽࠙൤ ٜ݅Ҋ ഝਊ

    ࣻ ੓׮

  83. хࢎ೤פ׮.