SVG Generation 2/3

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

<p dir="auto"><img src="https://images.hive.blog/768x0/https://steemitimages.com/DQmeEb8Gzqfvp3ncPFACTDQd8MzRz3m2SY6m99jeTtqLfwA/circle.png" alt="circle.png" srcset="https://images.hive.blog/768x0/https://steemitimages.com/DQmeEb8Gzqfvp3ncPFACTDQd8MzRz3m2SY6m99jeTtqLfwA/circle.png 1x, https://images.hive.blog/1536x0/https://steemitimages.com/DQmeEb8Gzqfvp3ncPFACTDQd8MzRz3m2SY6m99jeTtqLfwA/circle.png 2x" /> <p dir="auto">가장 쉬운 방법은 하나하나를 SVG 로 만들어서 뿌리면 된다고 했습니다.<br /> 서버 사이드에서 SVG generation 하는 방법도 알아봤고, 이에 대한 문제점이 트래픽이라는 점도 이야기를 했습니다. <p dir="auto">그럼 이제 브라우저에서 자체적으로 해결하는 방법을 생각해 봅시다.<br /> 자바스크립트를 써야겠네요. <p dir="auto">우선 하나의 동그라미를 만들어 봅시다. <pre><code>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>` } <p dir="auto">함수는 props 라는 object 를 받아서 < svg> ... </ svg> 스트링을 반환합니다.<br /> String 을 만드는데 ES6 의 Template Literal 을 사용했습니다. <p dir="auto">사실 위의 함수는 React Functional Component 를 약간 수정한 겁니다.<br /> React 에서는 component 를 리턴하지만 여기서는 그냥 String 을 리턴하기로 합니다. <p dir="auto">아무튼 이제 < div > 하나를 만들어서 innerHTML 에 넣으면 되겠지요. <p dir="auto"><span>JsFiddle 을 참고하세요 : <a href="https://jsfiddle.net/1Lohhbnp/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://jsfiddle.net/1Lohhbnp/ <hr /> <p dir="auto">이미지를 다루는 다른 방법은 < img > Tag 를 사용하는 것입니다.<br /> src 속성에 png, jpg, gif 뿐만 아니라 svg 도 넣을 수 있습니다. <p dir="auto">< img src='0.svg' /> <p dir="auto">이렇게 말이죠.<br /> 그런데 위의 포맷을 보면 src 에 파일(정확하게 이야기하면 uri) 가 들어갑니다.<br /> URI 는 http ://naver.com/0.svg 와 같은 인터넷 상에서의 주소/위치 정도로 이해하고 넘어갑니다. <p dir="auto">src 에 직접 svg 를 넣고 싶다면 앞에 data:image/svg+xml;utf8, 를 붙이고<br /> svg 내용을 직접 입력하면 됩니다. <pre><code>< 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>' /> <p dir="auto">위와 같이 사용하면 HTML 내에 이미지가 포함되므로 트래픽을 줄일 수 있습니다.<br /> 아쉽지만 Steemit 에서는 이런 식으로 사용할 수가 없습니다. <p dir="auto"><span>JSFiddle 을 참고하세요 : <a href="https://jsfiddle.net/pge7ron2/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://jsfiddle.net/pge7ron2/ <hr /> <p dir="auto">이제 어떻게 하는지 눈치 챘지요?<br /> 함수를 만듭니다. <pre><code>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>` } <p dir="auto">그리고 이 것을 src 에 넣으면 됩니다. <p dir="auto"><span>JsFiddle 을 참고하세요 : <a href="https://jsfiddle.net/nspuvpw2/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://jsfiddle.net/nspuvpw2/ <hr /> <p dir="auto">이제 여러개를 만들어 보아요. <p dir="auto">컨테이너 div 를 만들고, 여기에 < img src = '' /> 10 개를 넣을 겁니다. <p dir="auto"><span>JsFiddle 을 참고하세요 : <a href="https://jsfiddle.net/nspuvpw2/1" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://jsfiddle.net/nspuvpw2/1 <hr /> <p dir="auto">이제 색깔도 바꿀 수 있겠지요?<br /> 배열을 사용했고 for 문을 돌면 됩니다. <p dir="auto"><span>JsFiddle 을 참고하세요 : <a href="https://jsfiddle.net/nspuvpw2/2" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://jsfiddle.net/nspuvpw2/2 <hr /> <p dir="auto">이제 SVG 를 다루는 데는 문제 없을 겁니다.<br /> SVG, Javascript 를 이용한 프로그래밍은 정말 재밌답니다. <p dir="auto">React 도 개념은 동일합니다.<br /> 위 내용을 참고해서 먼저 시도해 보시면 좋을 것 같네요.