???? SVG๋ฅผ ์ง์ํ์ง ์๋ ์ด์ ???
์ง๊ธ๊น์ง SVG์ ๋ํ ์ฌ์ฉ ์์ฒญ์ ๊ฑฐ์ ์์ต๋๋ค. ๋น์ ์ ์ด๊ฒ์ ์๊ตฌํ๋ ์ ์ผํ ์ฌ๋์ผ ์ ์์ต๋๋ค.
์, Android๋ ์๋ก์ด ์ง์ v7 ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ถ์ํ์ต๋๋ค.
๊ทธ๋ฆฌ๊ณ ์คํ ์์ค SVG ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ต๋๋ค.
์ปดํ์ผ 'de.g reenrobot:androidsvg: 1.2.2-beta-1-tweaked-2'
Android ์ง์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ, ๋ฒ์ 23.2.0(2016๋
2์)
http://developer.android.com/tools/support-library/index.html
API ๋ ๋ฒจ 7 ์ด์์์ ์คํ๋๋ ์ฑ์ VectorDrawable ์์ฐ์ ๋ํ ์ง์์ ์ถ๊ฐํฉ๋๋ค. AnimatedVectorDrawable ์์ฐ์ API ๋ ๋ฒจ 11 ์ด์์์๋ ์ง์๋ฉ๋๋ค. ๋ฒกํฐ ์์ฐ์ ์ด๋ฏธ์ง ์์ฐ๋ณด๋ค ์๋นํ ์์ ์ ์์ผ๋ฉฐ ์ฌ๋ฌ ์ฅ์น ํ๋ฉด์ ์ง์ํ๋ ๋ฐ ํ์ํ ์์ฐ์ ์์ ์ค์ฌ ์ฑ ํฌ๊ธฐ๋ฅผ ์ค์ด๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
SVG ์ง์์ ์ํ๋ ์ ์ผํ ์ฌ๋์ ์๋๋๋ค. Fresco๊ฐ ์ง์์ ํด์ค๋ค๋ฉด ์ข์ ๊ฒ์ ๋๋ค. ์ด ๊ธฐ๋ฅ์ด ํ์ํ๊ธฐ ๋๋ฌธ์ Glide๋ก ๋ง์ด๊ทธ๋ ์ด์ ํด์ผ ํ์ต๋๋ค.
๋๋ ๋ฒกํฐ ๋๋ก์ด๋ธ์ด ์๋๋ก์ด๋ ์ง์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ ์ง์๋์๊ธฐ ๋๋ฌธ์ ์ ๋๋ฉ์ด์ ๋ฒกํฐ ๋๋ก์ด๋ธ์ progressBarImage๋ก ์ฌ์ฉํ์ง๋ง ํ๋ ์ค์ฝ์์๋ ๋ฒกํฐ ์ฌ์ฉ์ ์ง์ํ์ง ์๋ ๊ฒ ๊ฐ์ต๋๋ค.
๋ค์ ์คํ๋ฆฐํธ์ ์ด๊ฒ์ ๋ฃ์ด์ฃผ์ธ์, ๋ง์ด ํ์ํฉ๋๋ค!
Android Studio์๋ New->Vector Asset-> svg๋ฅผ vectordrawable๋ก ๋ณ๊ฒฝํ๊ณ appcompat v7 23.2.0 up, app:srcCompat= "@drawable/vectordrawable" ์ ์ฌ์ฉํ๋ ๋๊ตฌ๊ฐ ์์ต๋๋ค. ๊ทธ๋์ ์ฐ๋ฆฌ๋ vectordrawable์ svg๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค.
Android ์ง์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ, ๋ฒ์ 23.2.0(2016๋
2์)
http://developer.android.com/tools/support-library/index.html
ํ์ฌ๋ก์๋ SVG๋ฅผ ์ง์ํ ๊ณํ์ด ์์ต๋๋ค. ์ปค๋ฎค๋ํฐ์ ๋๊ตฐ๊ฐ๊ฐ ๊ธฐ์ฌํ๊ณ ์ถ๋ค๋ฉด ๊ฐ์ฌํ๊ฒ ์ต๋๋ค.
์ง์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ ๋ฒกํฐ ๋๋ก์ด๋ธ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์์ธํ ๋ด์ฉ์ #1176์ ์ฐธ์กฐํ์ธ์.
fresco๋ SVG๋ฅผ ์ง์ํ์ง ์๊ธฐ ๋๋ฌธ์ ๋ฒกํฐ ๋๋ก์ด๋ธ์ React ๋ค์ดํฐ๋ธ์์๋ ์ฌ์ฉํ ์ ์์ต๋๋ค. React ๋ค์ดํฐ๋ธ๋ก ์์ ํ๊ธฐ ์ํด ๋ง์ svg๋ฅผ png๋ก ๋ณํํด์ผ ํ์ต๋๋ค.
ํ์ํ ๊ฒฝ์ฐ SVG ๋์ฝ๋๋ฅผ ์ถ๊ฐํ ์ ์๋๋ก Fresco์ฉ ์ฌ์ฉ์ ์ ์ ๋์ฝ๋๋ฅผ ์ถ๊ฐํ๋ ๋ฐฉ๋ฒ์ ์ฐพ๊ณ ์์ต๋๋ค.
์ด์ ์ฌ์ฉ์ ์ ์ SVG ๋์ฝ๋์ ๋๋ก์ด๋ธ ํฉํ ๋ฆฌ๋ฅผ ์ถ๊ฐํ ์ ์์ต๋๋ค. ์ด๊ฒ์ด ์ด๋ป๊ฒ ๋ณด์ด๋์ง ๋งค์ฐ ๊ฐ๋จํ ์๋ ์ฌ๊ธฐ์์ ์ฐพ์ ์ ์์ต๋๋ค: https://github.com/facebook/fresco/tree/master/samples/showcase/src/main/java/com/facebook/fresco/samples/showcase/ ์ด๋ฏธ์ง ํ์/svg
์ด์ ์ฌ์ฉ์ ์ ์ SVG ๋์ฝ๋์ ๋๋ก์ด๋ธ ํฉํ ๋ฆฌ๋ฅผ ์ถ๊ฐํ ์ ์์ต๋๋ค. ์ด๊ฒ์ด ์ด๋ป๊ฒ ๋ณด์ด๋์ง ๋งค์ฐ ๊ฐ๋จํ ์๋ ์ฌ๊ธฐ์์ ์ฐพ์ ์ ์์ต๋๋ค: https://github.com/facebook/fresco/tree/master/samples/showcase/src/main/java/com/facebook/fresco/samples/showcase/ ์ด๋ฏธ์ง ํ์/svg
SimpleDraweeView์ ๋ํ ์์ ์ฐธ์กฐ ๋งํฌ๋ฅผ ์ฌ์ฉํ์ฌ svg ์ด๋ฏธ์ง๋ฅผ ํ์ํ๋ ๋ฐ ์ฌ์ฉํ ์ ์๋ ์ฌ๋์ด ์์ต๋๊น?
์ด 2๊ฐ์ ํ์ผ์ ๋ณต์ฌํ์ฌ ๋ถ์ฌ๋ฃ์ ๋ค์ Fresco๊ฐ ์ด๊ธฐํ๋ ๋ ์ฐ๊ฒฐํฉ๋๋ค.
๊ทธ๋ฌ๋ SVG ์ํ์ ๋งค์ฐ ๊ธฐ๋ณธ์ ์ด๋ฉฐ
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
SVG ์ง์์ ์ํ๋ ์ ์ผํ ์ฌ๋์ ์๋๋๋ค. Fresco๊ฐ ์ง์์ ํด์ค๋ค๋ฉด ์ข์ ๊ฒ์ ๋๋ค. ์ด ๊ธฐ๋ฅ์ด ํ์ํ๊ธฐ ๋๋ฌธ์ Glide๋ก ๋ง์ด๊ทธ๋ ์ด์ ํด์ผ ํ์ต๋๋ค.