191011 SVG를 배경이미지로 활용한 아이콘 - 오혜진

Transcript

1. @zineeworld SVGܳ ߓ҃੉޷૑۽ ഝਊೠ ই੉௑ ࢗ૕ӝ ௏ੋਗ য়ഌ૓
2. @zineeworld য়ט ੉ঠӝ ೞҊ र਷ Ѫ 1. ই੉௑ ಪ౟ী ؀ೠ ࣗѐ 2. CSS۽ Ӓܽ рױೠ ই੉௑ 3. background-image: url(‘SVG ௏٘’)
3. @zineeworld ই੉௑ ಪ౟ۆ?
4. @zineeworld औѱ ࢤпೞݶ Bootstrap Glyphicon, Font Awesome ଵҊ : https://webdir.tistory.com/476
5. @zineeworld Bootstrap Glyphicons Font Awesome
6. @zineeworld ই੉௑ ಪ౟੄ ੢੼ 1. ௿ېझݺਵ۽ औѱ ই੉௑ਸ ࠛ۞ৢ ࣻ ੓׮. 2. ߭ఠ Ӓې೗ਸ ੉ਊೞӝ ٸޙী ࢎ੉ૉ ߸҃੉ ਊ੉ೞ׮. 3. ੌ߈ ఫझ౟ী ੸ਊೡ ࣻ ੓ח CSSܳ ࢎਊೡ ࣻ ੓׮.
7. @zineeworld ௏ੋਗ ই੉௑ಪ౟ ઁ੘ https://icomoon.io/ SVG ౵ੌ۽ ୶୹ػ ই੉௑ٜਸ icomoon ࢎ੉౟ܳ ా೧ ই੉௑ಪ౟۽ ઁ੘೤פ׮. ௏ੋਗীࢲח ٣੗੉ցשԋࢲ ೧׼ ੘সਸ ೧઱Ҋ ҅भפ׮.
8. @zineeworld ѐಞ ੘সਵ۽ ೡ׼߉਷ ಕ੉૑ ࢜ ٣੗ੋ
9. @zineeworld
10. @zineeworld ಕ੉૑ ղী ߈ࠂ੸ਵ۽ ݂௼ োѾغח ࠗ࠙ী > ই੉௑੉ ࢎਊ ӝઓ ই੉௑ಪ౟ܳ ࢎਊ೧৳؍ ߑध Ӓ؀۽ <span class=“glyph-ui-chevron-right”></span>ਸ ੸যળ׮. ੸ਊߑߨ ߈ࠂ੸ਵ۽ ੸য઱૑ ঋҊ ખ ؊ ױࣽೞҊ औѱ ࢎਊೡ ࣻח হਸө?
11. @zineeworld ই੉௑ಪ౟ח ѐ୓݃׮ Ҋਬ੄ ਬפ௏٘ чਸ о૑Ҋ ੓׮ ੽Ӕ1) ই੉௑ಪ౟੄ ਬפ௏٘ чਸ ڙэ੉ ੸য઱੗
12. @zineeworld ই੉௑ಪ౟ח ѐ୓݃׮ Ҋਬ੄ ਬפ௏٘ чਸ о૑Ҋ ੓׮ ੽Ӕ1) ই੉௑ಪ౟੄ ਬפ௏٘ чਸ ڙэ੉ ੸য઱੗
13. @zineeworld ই੉௑ಪ౟ח ѐ୓݃׮ Ҋਬ੄ ਬפ௏٘ чਸ о૑Ҋ ੓׮ (ޙઁ੼) ਬפ௏٘ чਸ ݒߣ ࠁ੢ ೡ ࣻ হ׮ ੽Ӕ1) ই੉௑ಪ౟੄ ਬפ௏٘ чਸ ڙэ੉ ੸য઱੗
14. @zineeworld ੽Ӕ2) CSS۽ Ӓ۰ࠅө? border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(-45deg); https://codepen.io/zineeworld/pen/ZPxpgp
15. @zineeworld ੽Ӕ2) CSS۽ Ӓ۰ࠅө? https://codepen.io/zineeworld/pen/PLLydw (ޙઁ੼) Ѿҗޛ ٣పੌ ର੉ 1px 1.5px 2px
16. @zineeworld ੽Ӕ3) SVG ௏٘ܳ ഝਊ ೧ࠅө? 1. <img src=“icon.svg”> ੉޷૑ ౵ੌ۽ ࢎਊೠ׮. 1. ߭ఠ ੉޷૑ৈࢲ ௼ӝীח ઁড੉ হਵա ࢚࢝ਸ ߸҃ೞ۰ݶ ׮ܲ ౵ੌ੉ ೙ਃೞ׮.
 2. HTML ௏٘ উী <svg ~~~~></svg> ܳ ֍ח׮. 1. 1ߣ ߑߨࠁ׮ח ೞա੄ ௏٘۽ ࢚࢝ чਸ ߸҃ೞӝח ਊ੉ೞ׮. (fill=“colorч”) 2. <span class=“glyph-ui-chevron-right”></span> ࠁ׮ ഻-ঁ ؊ ӟ ௏٘ܳ ݒߣ ֍যঠ ೠ׮. 3. svg ௏٘ী ߸҃੉ ࢤӝݶ ࢎਊೞҊ ੓ח ݽٚ Ҕਸ ଺ই ߄Լ઻ঠ ೠ׮. 4. ই੉௑ ࢚࢝ਸ ஶ౟܀ ೞח Ѥ झఋੌ ౵ੌ۽ ాੌغযঠ ೞחؘ, 
 ੉ ߑधਸ ॳݶ html ௏٘ ࢚੄ ࣻ੿੉ ೙ਃೞ׮.
 3. CSS۽ ߓ҃੉޷૑ ࣘࢿী svg ௏٘ܳ ֍ח׮. 1. background-image: url(data:image/svg+xml, svg௏٘); 2. ࢚࢝ ҙܻܳ झఋੌ ౵ੌ ೠ Ҕীࢲ ઁযо оמೞ׮. SVG ই੉௑ਸ ࢎਊೞח ߑߨ
17. @zineeworld ੽Ӕ3) SVG ௏٘ܳ ഝਊ ೧ࠅө? 1.SVG ௏٘ܳ background-image ী ֍ӝ 1. IE ؀਽ਸ ਤ೧ SVG ௏٘ܳ Data URI ۽ ߸ജೞӝ 2. ߸ജೠ Data URI чਸ ߓ҃੉޷૑ী ֍ӝ
 2.Sassܳ ా೧ ࢚࢝ ߸ജ੉ ਊ੉ೠ function ٜ݅ӝ 1. Data URI ীח hex чਸ ֍ਸ ࣻ হ׮? 2. rgba੄ ঌ౵чী 0.999ܳ ઱੗
 3.SVG ௏٘ܳ ߓ҃੉޷૑۽ ഝਊೠ ই੉௑ ৮ࢿ!
18. @zineeworld <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"> <polygon fill="black" points="20.62 55.62 45.74 30.5 20.62 5.38 16.38 9.62 37.26 30.5 16.38 51.38 20.62 55.62"> </svg> SVG ௏٘ܳ ࢓ಝࠅөਃ? ױࣽೠ ಫܻҌਵ۽ ੉ܖযઉ ੓णפ׮. ੽Ӕ3) SVG ௏٘ܳ ഝਊ ೧ࠅө?
19. @zineeworld .icon display: inline-block width: 1em height: 1em background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><polygon fill='rgba(23, 114, 248, 0.999)' points='20.62 55.62 45.74 30.5 20.62 5.38 16.38 9.62 37.26 30.5 16.38 51.38 20.62 55.62'/></svg>") no-repeat Sass) background-image: url() ী SVG ௏٘ܳ ֍যࠇद׮. ੉ۧѱ ೧ب ؀ࠗ࠙੄ ࠳ۄ਋੷ীࢲח ز੘ೞ૑݅ IE ীࢲח ڰ૑ ঋणפ׮. ੽Ӕ3) SVG ௏٘ܳ ഝਊ ೧ࠅө?
20. @zineeworld ੽Ӕ3) SVG ௏٘ܳ ഝਊ ೧ࠅө? https://zineeworld.github.io/demo/svg_fonticon_test.html Windows (ઝஏ ࢚ױࠗఠ द҅ߑೱਵ۽ ௼܁ >> ౵੉য಩झ >> Edge >> IE11) MacOS (ઝஏࠗఠ ௼܁ >> ࢎ౵ܻ >> ౵੉য಩झ) IEীࢲח Data URI۽ ߸ജ೧ࢲ ֍਷ ௏٘݅ ੿࢚ ֢୹ؽ > : Data URI > : SVG
21. @zineeworld SVG → Data URI ߸ജ ߑߨ ੽Ӕ3) SVG ௏٘ܳ ഝਊ ೧ࠅө? https://runkit.com/zineeworld/convert-svg-to-data-uri
22. @zineeworld ੽Ӕ3) SVG ௏٘ܳ ഝਊ ೧ࠅө? .icon display: inline-block width: 1em height: 1em background: url(“data:image/ svg+xml,data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpolygon fill='black' points='20.62 55.62 45.74 30.5 20.62 5.38 16.38 9.62 37.26 30.5 16.38 51.38 20.62 55.62'/%3E%3C/svg%3E ") no-repeat Sass) background-image: url() ী ߸ജೠ Data URI ௏٘ܳ ֍যࠇद׮.
23. @zineeworld ੽Ӕ3) SVG ௏٘ܳ ഝਊ ೧ࠅө? @function svgIcon($color) $icon: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpolygon fill='#{$color}' points='20.62 55.62 45.74 30.5 20.62 5.38 16.38 9.62 37.26 30.5 16.38 51.38 20.62 55.62'/ %3E%3C/svg%3E" @return url($icon) .icon display: inline-block width: 1em height: 1em background: svgIcon(#1772f8) no-repeat Sassܳ ా೧ ࢚࢝ ߸ജ੉ ਊ੉ೠ function ٜ݅ӝ
24. @zineeworld ੽Ӕ3) SVG ௏٘ܳ ഝਊ ೧ࠅө? @function svgIcon($color) $icon: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpolygon fill='#{$color}' points='20.62 55.62 45.74 30.5 20.62 5.38 16.38 9.62 37.26 30.5 16.38 51.38 20.62 55.62'/ %3E%3C/svg%3E" @return url($icon) .icon display: inline-block width: 1em height: 1em background: svgIcon(#1772f8) no-repeat Sassܳ ా೧ ࢚࢝ ߸ജ੉ ਊ੉ೠ function ٜ݅ӝ (ޙઁ੼) fill чীח hex ௏٘ܳ ֍ਸ ࣻ হ׮!!
25. @zineeworld ੽Ӕ3) SVG ௏٘ܳ ഝਊ ೧ࠅө? @function svgIcon($color) $color: rgba($color, 1.0) $icon: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpolygon fill='#{$color}' points='20.62 55.62 45.74 30.5 20.62 5.38 16.38 9.62 37.26 30.5 16.38 51.38 20.62 55.62'/ %3E%3C/svg%3E" @return url($icon) .icon display: inline-block width: 1em height: 1em background: svgIcon(#1772f8) no-repeat Sassܳ ా೧ ࢚࢝ ߸ജ੉ ਊ੉ೠ function ٜ݅ӝ <<< ੉ۧѱ ೞݶ ؼ ઴ ঌওਵա ژ উ ؽ…
26. @zineeworld ੽Ӕ3) SVG ௏٘ܳ ഝਊ ೧ࠅө? @function svgIcon($color) $color: rgba($color, 1.0) $icon: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpolygon fill='#{$color}' points='20.62 55.62 45.74 30.5 20.62 5.38 16.38 9.62 37.26 30.5 16.38 51.38 20.62 55.62'/ %3E%3C/svg%3E" @return url($icon) .icon display: inline-block width: 1em height: 1em background: svgIcon(#1772f8) no-repeat Sassܳ ా೧ ࢚࢝ ߸ജ੉ ਊ੉ೠ function ٜ݅ӝ (ޙઁ੼) rgba(#ffffff, 1.0) = #ffffff rgba(#ffffff, 1.0) != rgba(255,255,255,1.0)
27. @zineeworld ੽Ӕ3) SVG ௏٘ܳ ഝਊ ೧ࠅө? Ӓۧ׮ݶ ঌ౵чী 0.999ܳ ઱ݶ যڄө? ੌױ ٣झ೒ۨ੉ غח Ѿҗч਷ য়ରо হ਺ਸ ഛੋ!
28. @zineeworld ੽Ӕ3) SVG ௏٘ܳ ഝਊ ೧ࠅө? @function svgIcon($color) $color: rgba($color, 0.999) $icon: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpolygon fill='#{$color}' points='20.62 55.62 45.74 30.5 20.62 5.38 16.38 9.62 37.26 30.5 16.38 51.38 20.62 55.62'/ %3E%3C/svg%3E" @return url($icon) .icon display: inline-block width: 1em height: 1em background: svgIcon(#1772f8) no-repeat Sassܳ ా೧ ࢚࢝ ߸ജ੉ ਊ੉ೠ function ٜ݅ӝ ٘٣য ৮ࢿ!
29. @zineeworld ੽Ӕ3) SVG ௏٘ܳ ഝਊ ೧ࠅө? @function svgIcon($color) $color: rgba($color, 0.999) $icon: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpolygon fill='#{$color}' points='20.62 55.62 45.74 30.5 20.62 5.38 16.38 9.62 37.26 30.5 16.38 51.38 20.62 55.62'/ %3E%3C/svg%3E" @return url($icon) .icon display: inline-block width: 1em height: 1em background: svgIcon(#1772f8) no-repeat &:hover background: svgIcon(#000000) no-repeat Sassܳ ా೧ ࢚࢝ ߸ജ੉ ਊ੉ೠ function ٜ݅ӝ hoverद ߸҃࢝਷ ੉ۧѱ ૑੿ // SVG ௏٘о background-image чਵ۽ ٜযр ҃਋ currentColor ࢎਊࠛо // fill='currentColor' ۄҊ ੸൤ա ز੘ೞ૑ ঋ਺, ױࣽ ޙ੗ৌ੉ غযߡܿ
30. @zineeworld https://codepen.io/zineeworld/pen/XGYNZp
31. @zineeworld • https://medium.com/coinone-official/svg%EB%A5%BC- %EB%B0%B0%EA%B2%BD%EC%9D%B4%EB%AF%B8%EC%A7%80 %EB%A1%9C-%ED%99%9C%EC%9A%A9%ED%95%9C- %EC%95%84%EC%9D%B4%EC%BD%98- %EC%82%AC%EC%9A%A9%EA%B8%B0-d46e681b492f • https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images • https://codepen.io/noahblon/pen/xGbXdV?editors=1100 • https://codepen.io/tigt/post/optimizing-svgs-in-data-uris ଵҊ੗ܐ
32. @zineeworld ՘