https://css-tricks.com/using-svg/
Using SVG | CSS-Tricks
SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use
css-tricks.com
svg를 통해 웹에서도 벡터 형식의 이미지를 렌더할 수 있게 되었다.
비트맵 형식(jpg, png...)에 비해 고용량이지만 깔끔하고 스케일의 크기를 키우거나 줄여도 깨지지 않는 다는 점에서 유용하다. 자주 사용하는 font-awesome도 svg를 이용하기 쉽게 만들어 놓은 것이다.
우선 svg 파일 먼저 구해보자. 다운로드 받을 수 있는 곳은 많다.
(http://svgicons.sparkk.fr/), (http://fontello.com/) 등등 아무 곳에가서 프로젝트에 넣어보자.
사용하려면 단순히 img에 src 링크를 주면 된다.
<img src="exchange.svg" alt="svg" width="100" />
react에서 svg를 사용하는 방법은 여기를 참고해보자
(https://react-svgr.com/playground/)
svg를 직접 만들 수도 있다. 한땀한땀 코드로 만들어가면서...
그냥 포토샵이나 일러스트레이터로 만들고 svg로 export하는게 훨씬 나을 것 같다.
(http://tutorials.jenkov.com/svg/index.html)
SVG Tutorial
This tutorial series goes through the majority of SVG's (Scalable Vector Graphics) features.
tutorials.jenkov.com
'웹 전반, 브라우저 > HTML, CSS' 카테고리의 다른 글
| Masonry layouts 구현하기 (0) | 2020.06.30 |
|---|---|
| video, audio 태그의 속성, 메서드 (0) | 2020.06.21 |
| Fragment(#) 사용하기, Hashbang(#!) (0) | 2020.04.07 |
| CSS 심화 (나름?) (0) | 2020.04.02 |
| form, input 태그 + etc (0) | 2020.03.27 |
