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

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. хࢎ೤פ׮.