SVG Generation 2/3

아래와 같은 것을 한번 만들어 보려고 합니다.

가장 쉬운 방법은 하나하나를 SVG 로 만들어서 뿌리면 된다고 했습니다.
서버 사이드에서 SVG generation 하는 방법도 알아봤고, 이에 대한 문제점이 트래픽이라는 점도 이야기를 했습니다.

그럼 이제 브라우저에서 자체적으로 해결하는 방법을 생각해 봅시다.
자바스크립트를 써야겠네요.

우선 하나의 동그라미를 만들어 봅시다.

function Circle(props) {
  const { size, color, text } = props
  return `
    < svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 44 44">
      <circle cx="22" cy="22" r="20" stroke="white" stroke-width="2" fill="${color?color:"black"}"/>
        <text id="val" font-size="${size}" fill="white" font-family="Verdana" text-anchor="middle" alignment-baseline="baseline" x="22" y="34.4"> ${text} </text>
    </svg>`
}

함수는 props 라는 object 를 받아서 < svg> ... </ svg> 스트링을 반환합니다.
String 을 만드는데 ES6 의 Template Literal 을 사용했습니다.

사실 위의 함수는 React Functional Component 를 약간 수정한 겁니다.
React 에서는 component 를 리턴하지만 여기서는 그냥 String 을 리턴하기로 합니다.

아무튼 이제 < div > 하나를 만들어서 innerHTML 에 넣으면 되겠지요.

JsFiddle 을 참고하세요 : https://jsfiddle.net/1Lohhbnp/

---

이미지를 다루는 다른 방법은 < img > Tag 를 사용하는 것입니다.
src 속성에 png, jpg, gif 뿐만 아니라 svg 도 넣을 수 있습니다.

< img src='0.svg' />

이렇게 말이죠.
그런데 위의 포맷을 보면 src 에 파일(정확하게 이야기하면 uri) 가 들어갑니다.
URI 는 http ://naver.com/0.svg 와 같은 인터넷 상에서의 주소/위치 정도로 이해하고 넘어갑니다.

src 에 직접 svg 를 넣고 싶다면 앞에 data:image/svg+xml;utf8, 를 붙이고
svg 내용을 직접 입력하면 됩니다.

< img src='data:image/svg+xml;utf8,
< svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 44 44">
  <circle cx="22" cy="22" r="20" stroke="white" stroke-width="2" fill="black"/>
  <text id="val" font-size="32" fill="white" font-family="Verdana" text-anchor="middle" alignment-baseline="baseline" x="22" y="34.4"> 1 </text>
</svg>' />

위와 같이 사용하면 HTML 내에 이미지가 포함되므로 트래픽을 줄일 수 있습니다.
아쉽지만 Steemit 에서는 이런 식으로 사용할 수가 없습니다.

JSFiddle 을 참고하세요 : https://jsfiddle.net/pge7ron2/

---

이제 어떻게 하는지 눈치 챘지요?
함수를 만듭니다.

function Circle(props) {
  const { size, color, text } = props
  return `data:image/svg+xml;utf8,
    < svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 44 44">
      <circle cx="22" cy="22" r="20" stroke="white" stroke-width="2" fill="${color?color:"black"}"/>
        <text id="val" font-size="${size}" fill="white" font-family="Verdana" text-anchor="middle" alignment-baseline="baseline" x="22" y="34.4"> ${text} </text>
    </svg>`
}

그리고 이 것을 src 에 넣으면 됩니다.

JsFiddle 을 참고하세요 : https://jsfiddle.net/nspuvpw2/

---

이제 여러개를 만들어 보아요.

컨테이너 div 를 만들고, 여기에 < img src = '' /> 10 개를 넣을 겁니다.

JsFiddle 을 참고하세요 : https://jsfiddle.net/nspuvpw2/1

---

이제 색깔도 바꿀 수 있겠지요?
배열을 사용했고 for 문을 돌면 됩니다.

JsFiddle 을 참고하세요 : https://jsfiddle.net/nspuvpw2/2

---

이제 SVG 를 다루는 데는 문제 없을 겁니다.
SVG, Javascript 를 이용한 프로그래밍은 정말 재밌답니다.

React 도 개념은 동일합니다.
위 내용을 참고해서 먼저 시도해 보시면 좋을 것 같네요.