최근 주요 PC 브라우저는 네이티브 지원 SVG.
취급할 기회가 있었으므로, 조금 공부해 보려고 생각합니다.

filter 처리 등은, svg 요소의 기본 사용법 요약 등으로 알기 쉽게 해설되고 있으므로 그쪽을 참조해 주세요.
여기, 아주 기초적인 곳에서.

SVG (Scalable Vector Graphics)

Scalable Vector Graphics(Scalable Vector Graphics, SVG)는 XML 기반의 2차원 벡터 이미지용 이미지 형식 중 하나입니다. 애니메이션과 사용자 상호 작용도 지원합니다. SVG의 사양은 W3C에 의해 개발되어 오픈 표준으로 권고되었다.

W3C 공식 사이트

SVG 1.1 사양(제2판) - 일본어 번역(비공식)

해설용 샘플

시에 lds. 이오 에서 생성된 배지 SVG를 사용합니다.

배지 사양

배지 템플릿

htp // // ㎎. 그럼 lds. 이오 / 바 드게 / 스 b ぇ c t s 츠츠 s eb ghtg 리엔. svg
1 <svg xmlns="http://www.w3.org/2000/svg" width="95" height="18"> 2 <linearGradient id="a" x2="0" y2="100%"> 3 <stop offset="0.0" stop-color="#fff" stop-opacity=".7"/> 4 <stop offset="0.1" stop-color="#aaa" stop-opacity=".1"/> 5 <stop offset="0.9" stop-color="#000" stop-opacity=".3"/> 6 <stop offset="1.0" stop-color="#000" stop-opacity=".5"/> 7</linearGradient> 8 <rect rx="4" width="95" height="18" fill="#555"/> 9 <rect rx="4" x="51" width="44" height="18" fill="#4c1"/> 10 <path fill="#4c1" d="M51 0h4v18h-4z"/> 11 <rect rx="4" width="95" height="18" fill="url(#a)"/> 12 <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11"> 13 <text x="26.5" y="14" fill="#010101" fill-opacity=".3">subject</text> 14 <text x="26.5" y="13">subject</text> 15 <text x="72.0" y="14" fill="#010101" fill-opacity=".3">status</text> 16 <text x="72.0" y="13">status</text> 17</g> 18</svg> (해설용으로 성형, 행 번호를 부가하고 있습니다) 해설

svg 문서

1  <svg xmlns="http://www.w3.org/2000/svg" width="95" height="18">
...
18 </svg>

width , height 속성에 표시 크기를 지정합니다.viewBox 로 표시 범위를 지정할 수 있다.

둥근 사각형을 그리기(subject 배경)

8    <rect rx="4" width="95" height="18" fill="#555"/>

둥근 구형은 rect 태그를 사용해 표현한다.


속성
설명


rx
둥근 X 축 반경 길이

ry
생략하면 rx와 같은 값이됩니다.

x
구형의 좌변의 X 좌표. 생략은 0

y
구형의 상변의 Y 좌표. 생략은 0

width
사각형의 폭

height
사각형의 높이

fill
지정된 색으로 채우기

둥근 사각형 그리기(상태 배경)

9    <rect rx="4" x="51" width="44" height="18" fill="#4c1"/>

둥근 구형은, 「subject」와 같이 rect 태그를 사용한다.

둥근 구형의 좌변을 구형으로 한다

10   <path fill="#4c1" d="M51 0h4v18h-4z"/>

둥근 모서리를 채우려면 path 태그를 사용합니다.


속성
설명


fill
지정된 색으로 채우기

d
도형의 외형선 정의


알기 쉽게 하기 위해서, 채우는 색을 빨강으로 하면 다음과 같이 된다.

rect 태그로 구형 draw 하는 것과 같다.

<rect x="51" width="4" height="18" fill="#4c1"/>

그라데이션을 중첩

2    <linearGradient id="a" x2="0" y2="100%">
3      <stop offset="0.0" stop-color="#fff" stop-opacity=".7"/>
4      <stop offset="0.1" stop-color="#aaa" stop-opacity=".1"/>
5      <stop offset="0.9" stop-color="#000" stop-opacity=".3"/>
6      <stop offset="1.0" stop-color="#000" stop-opacity=".5"/>
7    </linearGradient>
...
11   <rect rx="4" width="95" height="18" fill="url(#a)"/>

linearGradient 태그로 선형 그라데이션을 정의합니다.rect 태그의 fill 속성으로, 정의한 그라데이션을 지정해 묘화 한다.


그라데이션을 알기 쉽게 하기 위해 불투명도 100%로 하여 그리면 다음과 같다.

문자 그리기

12   <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
13     <text x="26.5" y="14" fill="#010101" fill-opacity=".3">subject</text>
14     <text x="26.5" y="13">subject</text>
15     <text x="72.0" y="14" fill="#010101" fill-opacity=".3">status</text>
16     <text x="72.0" y="13">status</text>
17   </g>

g 태그로 그래픽 요소(문자)를 그룹화합니다.


속성
설명


fill
지정된 색으로 채우기

text-anchor
지정된 값에 따라 텍스트 문자열을 상대적으로 정렬

font-family
사용할 글꼴을 우선 순위가 지정된 목록에서 사제

font-size
글꼴 크기

문자(그림자)

13     <text x="26.5" y="14" fill="#010101" fill-opacity=".3">subject</text>
...
15     <text x="72.0" y="14" fill="#010101" fill-opacity=".3">status</text>

텍스트 태그로 텍스트를 그립니다.
y+1, 불투명도 30%로 그림자를 낸다.

문자

14     <text x="26.5" y="13">subject</text>
...
16     <text x="72.0" y="13">status</text>

텍스트 태그로 텍스트를 그립니다.