Scalable Vector Graphics
스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다.
SVG 형식의 파일은 SVG기반의 전문 그래픽 편집 프로그램을 사용하여 편집이 가능하다. 물론 XML 파일로 되어 있으므로 문서 편집기로도 편집이 가능하다.
현재 마이크로소프트의 인터넷 익스플로러 8 이전 버전을 제외한 대부분의 주요 웹 브라우저들은 SVG를 지원한다. 인터넷 익스플로러에서는 SVG 파일을 보기 위해 별도의 플러그인을 수동으로 설치하여야 하며, 그렇지 않은 경우에는 웹 페이지 제작자가 구글 코드에서 개발중인 자바스크립트 라이브러리, SVG Web 을 웹 페이지 코드에 포함시켜야 한다.
Categories
- Web typography#Inline SVG - 웹에서 SVG 를 직접 인라인 하는 방법. (v-icon과 관련됨)
Libraries
- SVG++
- nanosvg - https://github.com/memononen/nanosvg
- libsvgtiny
- Blend2D: http://blend2d.com/
- SVGInject - SVG 파일을 DOM으로 주입할 수 있게 도와준다.
- TinyVG
- scour - Python으로 작성된 SVG 옵티마이저/클리너입니다.
- SVGsplit - Tool for splitting svg files
- svg.py (python)
- svglib (python)
- CairoSVG (python)
- pynanosvg (python)
Online tools
- Heazy - 벡터 디자인 스튜디오
- 벡터로된 시각화 자료를 생성 및 쉽게 편집
- SVG/PNG Export 또는 JS/TS React Snippet으로 복사 가능
- 템플릿으로 저장해서 재사용 가능
- 가입 필요 없음. 무료
- SVG 아바타 만들기
- Text-to-SVG AI
Vector graphics editor Projects
Examples
Resources
- Tabler Icons 558 Fully customizable free SVG icons. (MIT license)
SVG Tag
SVG 캔버스 전체 크기는 200x200 픽셀입니다. 그러나 viewBox
속성을 사용하여 (0,0)에서 시작하는 100x100px의 화면을 200x200px의 화면에 출력합니다.
HTML 문서에 SVG 포함하기
SVG 코드는 다음의 HTML 요소를 사용해 문서에서 활용할 수 있습니다.
- <img>
- [[HTML:embed|<embed>
]]
- <object>
- <iframe>
- [[HTML:svg|<svg>
]]
- [[HTML:canvas|<canvas>
]] (JavaScript)
이미지 (Image)
SVG 파일(*.svg)을 HTML 문서에서 사용하는 가장 손쉬운 방법은 <img> 요소의 src 속성에 파일의 경로를 설정하는 것입니다. 이미지가 의미를 포함한 경우 적절한 대체 텍스트를 제공합니다.
임베드 (embed)
임베드 요소를 사용해 SVG 요소를 HTML 문서에 포함하는 방법은
<embed>
요소의 src 속성에 파일의 경로를 설정하는 것입니다. 이미지를 설명해야 할 필요가 있다면 적절한 대체 텍스트를 aria-label 속성을 통해 제공합니다.
오브젝트 (object)
오브젝트 요소를 사용해 SVG 요소를 HTML 문서에 포함하는 방법은 <object> 요소의 data 속성에 파일의 경로를 설정하는 것입니다. 이미지를 설명해야 할 필요가 있다면 적절한 대체 텍스트를 aria-label 속성을 통해 제공합니다.
아이프레임 (iframe)
아이프레임 요소를 사용해 SVG 요소를 HTML 문서에 포함하는 방법은 <iframe> 요소의 src 속성에 파일의 경로를 설정하는 것입니다. 이미지를 설명해야 할 필요가 있다면 적절한 대체 텍스트를 aria-label 속성을 통해 제공합니다.
인라인 SVG
아이프레임 요소를 사용해 SVG 요소를 HTML 문서에 포함하는 방법은 <iframe> 요소의 src 속성에 파일의 경로를 설정하는 것입니다. 이미지를 설명해야 할 필요가 있다면 SVG 접근성을 고려하여 콘텐츠를 제공해야 합니다.
===
<svg>
요소 ===
<svg>요소는 인라인 SVG의 시작입니다. svg 요소에 추가 할 수 있는 속성은 다양합니다. 일반적으로 version, xmlns, xmlns:xlink, viewbox, width, height 속성이 설정됩니다.
<svg
version="1.1"
xmlns=http://www.w3.org/2000/svg
xmlns:xlink="http://www.w3.org/1999/xlink"
width="520" height="520"
viewBox="0 0 520 520">
...
</svg>
하지만 인라인 SVG 코드의 경우, 웹 브라우저에서 렌더링 하는데 다음 속성은 필요하지 않습니다.
- version
- xmlns
- xmlns:xlink
그러므로 인라인 SVG를 사용할 경우, 아래 코드처럼 간결하게 사용할 수 있습니다.
웹 캔버스 (canvas)
var example = document.getElementById('example');
var context = example.getContext('2d');
var img = new Image();
img.onload = function() {
context.drawImage(img, 0, 0);
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";
Elements
Path
See also
Favorite site
- Wikipedia (en) SVG에 대한 설명
- W3C: SCALABLE VECTOR GRAPHICS (SVG)
- An SVG Primer for Today's Browsers
- Scalable Vector Graphics (SVG) 1.1 (Second Edition)
- A Guide to SVG Animations (SMIL)
- SVG-Whiz! (SVG Wiki for the developer)
- SVG, JS, CSS로 만드는 라이언 로그인 폼
Download Resources
- [추천] Pattern Monster - SVG Pattern Generator - SVG 디자인 패턴 194개를 무료로 제공하며 색상과 패턴을 수정하여 다운로드 가능한 곳
- [추천] Freepik: Download Free Videos, Vectors, Photos, and PSD
- Game-icons.net - 4131 free SVG and PNG icons for your games or apps
- Free SVG icons, instant downloads (no attribution) | Reshot
- icons8/flat-color-icons: Free Flat Color Icons
- svg-icon - An ultimate SVG icons collection DONE RIGHT.
- Noun Project: Free Icons & Stock Photos for Everything - 프리인데 가입해야 하는듯
- Free SVG Illustrations (Free Illustrations) Vector Illustrations - SVG 로 만든 일러스트 이미지 CC0 다운로드
- [추천] Free SVG Image & Icon. | SVG Silh - 게임에 사용할 용도로
- [추천] SVG Repo - Free SVG Vectors and Icons - 500.000+ Open-licensed SVG Vector and Icons
- https://www.svgrepo.com/collection/winter-town-filled-vectors/
- https://www.svgrepo.com/collection/pumpkin-emoji-vectors/
- https://www.svgrepo.com/collection/monster-character-avatars/
- https://www.svgrepo.com/collection/linea-thin-icons/
- https://www.svgrepo.com/collection/destiny-game-icons/
- https://www.svgrepo.com/collection/hearthsim-game-icons/
- https://www.svgrepo.com/collection/botanical-hand-drawn-vectors/
- https://www.svgrepo.com/collection/curved-interface-icons/
- https://www.svgrepo.com/collection/gems-and-crystal-line-vectors/ ~~ !!
- https://www.svgrepo.com/collection/middle-age-monocolor/
- https://www.svgrepo.com/collection/solid-line-icons/
- https://www.svgrepo.com/collection/role-playing-game/
- https://www.svgrepo.com/collection/dog-breed-illustration/
- https://www.svgrepo.com/collection/geometric-heart-icons/
- https://www.svgrepo.com/collection/building-line-icons/
- https://www.svgrepo.com/collection/human-organs-line-vectors/
- https://www.svgrepo.com/collection/animal-flat-vectors/
- https://www.svgrepo.com/collection/hand-drawn-arrow-vectors/
- https://www.svgrepo.com/collection/nature-logo-badges/
- https://www.svgrepo.com/collection/circular-avatar-vectors/
- https://www.svgrepo.com/collection/medical-health-icons/ ~~ !!
- https://www.svgrepo.com/collection/happy-trees-flat-vectors/ ~~ !!
- https://www.svgrepo.com/collection/happy-trees-outline/ ~~ !!
- https://www.svgrepo.com/collection/analytics-and-charts-line-icons/
- https://www.svgrepo.com/collection/tools-line-vectors/ ~~ !!
- https://www.svgrepo.com/collection/weather-forecast-glyphs-icons/ ~~ !!
- https://www.svgrepo.com/collection/astrology-symbols/ ~~ !!
- https://www.svgrepo.com/collection/fruits-and-vegetables-glyphs-icons/
- https://www.svgrepo.com/collection/flat-profile-avatar/
- https://www.svgrepo.com/collection/halloween-scary-vectors/
- https://www.svgrepo.com/collection/middle-age-weapon-vectors/ ~~ !!
- https://www.svgrepo.com/collection/origami-animal-line-vectors/ ~~ !!
- https://www.svgrepo.com/collection/vegetable-glyph-icons/ ~~ !!
- https://www.svgrepo.com/collection/building-landmark-vectors/
- https://www.svgrepo.com/collection/padlock-types-line-icons/ ~~ !!
- https://www.svgrepo.com/collection/adventure-and-camping-line-vectors/
- https://www.svgrepo.com/collection/fruits-glyph-icons/
- https://www.svgrepo.com/collection/weather-line-vectors-2/ ~~ !!
- https://www.svgrepo.com/collection/smiley-emoji-circular-vectors/ ~~ !!
- https://www.svgrepo.com/collection/animals-material-icons/
- https://www.svgrepo.com/collection/chess-vectors/ ~~ !!
- https://www.svgrepo.com/collection/people-icooon-mono-vectors/3 ~~ !!
- https://www.svgrepo.com/collection/doodle-basic-emoji-face-vectors/ ~~ !!
MSDN
- [https://msdn.microsoft.com/ko-kr/library/gg589525(v=vs.85.aspx MSDN: SVG]
- [https://msdn.microsoft.com/ko-kr/library/gg193979(v=vs.85.aspx MSDN: 기본 SVG 애니메이션]