๐ŸŽจSVG to PNG ๋ณ€ํ™˜๊ธฐ

SVG ํŒŒ์ผ ์„ ํƒ โ†’ ๋ฐฐ์œจ ์„ ํƒ โ†’ ๋ธŒ๋ผ์šฐ์ €์—์„œ PNG ๋ณ€ํ™˜ ๋ฐ ๋‹ค์šด๋กœ๋“œ

SVG to PNG ๋ณ€ํ™˜ ๋ฐฉ๋ฒ•

์ด ๋„๊ตฌ๋Š” ๋ธŒ๋ผ์šฐ์ €์˜ Canvas API๋ฅผ ์‚ฌ์šฉํ•ด SVG ํŒŒ์ผ์„ PNG ์ด๋ฏธ์ง€๋กœ ๋ณ€ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ์™ธ๋ถ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋‚˜ ์„œ๋ฒ„ ์—†์ด ์ˆœ์ˆ˜ ๋ธŒ๋ผ์šฐ์ € ๊ธฐ๋Šฅ๋งŒ ์‚ฌ์šฉํ•˜๋ฏ€๋กœ ๋น ๋ฅด๊ณ  ์•ˆ์ „ํ•ฉ๋‹ˆ๋‹ค. SVG ํŒŒ์ผ์„ ์„ ํƒํ•˜๋ฉด ๋ฏธ๋ฆฌ๋ณด๊ธฐ์™€ ์›๋ณธ ํฌ๊ธฐ๊ฐ€ ํ‘œ์‹œ๋˜๊ณ , ๋ฐฐ์œจ์„ ์„ ํƒํ•˜๋ฉด ์ถœ๋ ฅ ํฌ๊ธฐ๊ฐ€ ๋ฏธ๋ฆฌ ๋ณด์ž…๋‹ˆ๋‹ค. SVG ์ž์ฒด ๋ฐฐ๊ฒฝ์ด ์—†์œผ๋ฉด ๋ณ€ํ™˜๋œ PNG๋„ ํˆฌ๋ช… ๋ฐฐ๊ฒฝ์œผ๋กœ ์ถœ๋ ฅ๋ฉ๋‹ˆ๋‹ค.

SVG๋Š” ๋ฒกํ„ฐ ํ˜•์‹์ด๋ผ ๋ฐฐ์œจ์„ ์•„๋ฌด๋ฆฌ ๋†’์—ฌ๋„ ํ’ˆ์งˆ์ด ๋–จ์–ด์ง€์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์›น ์•„์ด์ฝ˜์€ 1~2๋ฐฐ, ์ธ์‡„๋ฌผ์€ 3~4๋ฐฐ, ๋Œ€ํ˜• ํฌ์Šคํ„ฐ๋‚˜ ๋ฐฐ๋„ˆ๋Š” 6~8๋ฐฐ๋ฅผ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค. ๋‹ค๋งŒ ๋ฐฐ์œจ์ด ๋„ˆ๋ฌด ๋†’์œผ๋ฉด ์บ”๋ฒ„์Šค ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ๋งŽ์ด ์‚ฌ์šฉํ•ด ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋Š๋ ค์งˆ ์ˆ˜ ์žˆ์œผ๋‹ˆ ํ•„์š”ํ•œ ํฌ๊ธฐ๋งŒํผ๋งŒ ์„ ํƒํ•˜์„ธ์š”.

์™ธ๋ถ€ ํฐํŠธ, ์™ธ๋ถ€ URL ์ด๋ฏธ์ง€, ์Šคํฌ๋ฆฝํŠธ ๋“ฑ์ด ํฌํ•จ๋œ ๋ณต์žกํ•œ SVG๋Š” ๋ธŒ๋ผ์šฐ์ € ๋ณด์•ˆ ์ •์ฑ…(CORS)์œผ๋กœ ์ธํ•ด ํ•ด๋‹น ์š”์†Œ๊ฐ€ ๋ˆ„๋ฝ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ€์žฅ ์•ˆ์ •์ ์ธ ๊ฒฐ๊ณผ๋ฅผ ์œ„ํ•ด์„œ๋Š” Base64 ์ธ์ฝ”๋”ฉ ์ด๋ฏธ์ง€์™€ ์ธ๋ผ์ธ ์Šคํƒ€์ผ๋กœ ์ž‘์„ฑ๋œ ์ž๊ธฐ์™„๊ฒฐํ˜• SVG๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”.

์ž์ฃผ ๋ฌป๋Š” ์งˆ๋ฌธ

SVG์— width/height๊ฐ€ ์—†์œผ๋ฉด ์–ด๋–ป๊ฒŒ ๋˜๋‚˜์š”?

SVG์— width/height ์†์„ฑ์ด ์—†์œผ๋ฉด ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ฒฝ์šฐ ์ถœ๋ ฅ ํฌ๊ธฐ๊ฐ€ ์˜๋„์™€ ๋‹ค๋ฅผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. SVG ํŒŒ์ผ์— viewBox์™€ ํ•จ๊ป˜ ๋ช…์‹œ์ ์ธ width/height๋ฅผ ์ถ”๊ฐ€ํ•ด ๋‘๋ฉด ๋” ์ •ํ™•ํ•˜๊ฒŒ ๋ณ€ํ™˜๋ฉ๋‹ˆ๋‹ค.

SVG์˜ ํˆฌ๋ช… ๋ฐฐ๊ฒฝ์„ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ๋‚˜์š”?

๋„ค. SVG์— ๋ฐฐ๊ฒฝ ์ƒ‰์ƒ์ด ์—†์œผ๋ฉด ๋ณ€ํ™˜๋œ PNG๋„ ํˆฌ๋ช… ๋ฐฐ๊ฒฝ์œผ๋กœ ์ €์žฅ๋ฉ๋‹ˆ๋‹ค. ๊ฒฐ๊ณผ ๋ฏธ๋ฆฌ๋ณด๊ธฐ์—์„œ ๋ฐ”๋‘‘ํŒ ํŒจํ„ด์ด ๋ณด์ด๋ฉด ํˆฌ๋ช… ์˜์—ญ์ž„์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.

ํฐํŠธ๊ฐ€ ๊นจ์ ธ์„œ ๋‚˜์˜ค๋Š” ๊ฒฝ์šฐ๋Š”?

SVG์— ์™ธ๋ถ€ ์›นํฐํŠธ(Google Fonts ๋“ฑ)๋ฅผ ์‚ฌ์šฉํ•œ ๊ฒฝ์šฐ CORS ์ •์ฑ…์œผ๋กœ ์ธํ•ด ๋ณ€ํ™˜ ์‹œ ํฐํŠธ๊ฐ€ ๋Œ€์ฒด ํฐํŠธ๋กœ ํ‘œ์‹œ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํฐํŠธ๋ฅผ SVG์— ์ง์ ‘ ์ž„๋ฒ ๋“œํ•˜๊ฑฐ๋‚˜, ํ…์ŠคํŠธ๋ฅผ ํŒจ์Šค(path)๋กœ ๋ณ€ํ™˜ํ•˜๋ฉด ํ•ด๊ฒฐ๋ฉ๋‹ˆ๋‹ค.