제4장. SVG 구성요소

제4장. SVG 구성요소

기본 요소

<svg> 요소
- <svg x="좌표" y="좌표" width="크기" height="크기" xmlns="URI" viewbox="x y w h">

HTML 문서에 포함시키기 (Embedding)
- <EMBED width="크기" height="크기" src="svg파일" >
<g> 요소 속성 : <g id="이름" style="스타일" transform="변환">
- 중첩 가능

<title> <desc> 요소

예제

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/ svg10.dtd">
<svg width="5cm" height="5cm"
          xmlns="http://www.w3.org/2000/svg">
    <title>SVG Grouping</title>
    <desc>Two groups, each of two rectangles</desc>
    <g id="group1" fill="red" >
       <rect x="1cm" y="1cm" width="1cm" height="1cm" />
       <rect x="3cm" y="1cm" width="1cm" height="1cm" />
    </g>
    <g id="group2" fill="blue" >
       <rect x="1cm" y="3cm" width="1cm" height="1cm" />
       <rect x="3cm" y="3cm" width="1cm" height="1cm" />
    </g>
    
    <rect x=".1cm" y=".1cm" width="4.9cm" height="4.9cm"
        fill="none" stroke="blue" stroke-width=".02cm" />
</svg>

<embed src="s04-group.svg"
width="200" height="200">

참조요소

URI 참조 형식
- local URI : #id이름
- non-local URI : URI

URI 참조 속성
- xlink:href = "URI"
- style 속성에 대해서 url(URI)

<defs> 요소, id 속성, <use> 요소

<svg width="5cm" height="5cm">
<defs>
     <rect id="MyRect" x="0" y="0" width="3cm" height="1cm"/>
     <linearGradient id="Gradient01">
        <stop offset="20%" stop-color="#39F" />
        <stop offset="90%" stop-color="#F3F" />
     </linearGradient>
</defs>

<rect x="1cm" y="1cm" width="3cm" height="1cm"
           fill="url(#Gradient01)" />
<use xlink:href="#MyRect" fill="url(#Gradient01)"
           transform="translate(38,80) rotate(20)" />

<rect x=".01cm" y=".01cm" width="4.98cm" height="4.98cm"
           fill="none" stroke="blue" stroke-width=".02cm" />
</svg>

viewbox 속성
<use>에서 스타일 사용하기

<svg width="4cm" height="2cm" viewBox="0 0 600 300">
   <defs style=" /* rule 9 */ stroke-miterlimit: 10" >
      <path id="MyPath" class="MyPathClass"
           d="M100 50 L500 50 L500 250 L100 250"
          style=" /* rule 10 */ stroke-dasharray:200,100" />
   </defs>
   <style type="text/css">
      <![CDATA[
      /* rule 1 */ #MyUse { fill: blue }
      /* rule 2 */ #MyPath { stroke: red }
      /* rule 3 */ use { fill-opacity: .5 }
      /* rule 4 */ path { stroke-opacity: .5 }
      /* rule 5 */ .MyUseClass { stroke-linecap: round }
      /* rule 6 */ .MyPathClass { stroke-linejoin: bevel }
      ]]>
   </style>

   <rect x="0" y="0" width="600" height="300"
            style="fill:none; stroke:blue; stroke-width:3"/>
   <g style=" /* rule 11 */ stroke-width:40">
      <use id="MyUse" xlink:href="#MyPath"
               class="MyUseClass"
               style="/* rule 12 */ stroke-dashoffset:50" />
   </g>
</svg>

<g style="/* 11 */ stroke-width:40">

<use style="/* rule 1 */ fill:blue;
   /* rule 3 */ fill-opacity:.5;
   /* rule 5 */ stroke-linecap:round;
   /* ... 12 */ stroke-dashoffset:50" />

<path d="M300 50 ... L300 250"
     style="/* rule 2 */ stroke:red;
     /* rule 4 */ stroke-opacity:.5;
     /* rule 6 */ stroke-linejoin: bevel;
     /* r.10 */ stroke-dasharray:..." />

</g>

기타 참조 요소

<symbol> 요소 : <symbol id="이름" viewbox="x y w h">
- <g> 요소와 차이점 : 반드시 viewbox 내에서 도형을 그린다.
- <use>에서 뷰포트를 지정하면 크기에 맞추어 출력한다.

<svg width="5cm" height="5cm" viewBox="0 0 50 50" >
<defs>
    <symbol id="MyS" viewBox="0 0 20 20">
      <rect x="1" y="1" width="8" height="8"/>
      <rect x="11" y="1" width="8" height="8"/>
      <rect x="1" y="11" width="8" height="8"/>
      <rect x="11" y="11" width="8" height="8"/>
    </symbol>
</defs>
<use x="5" y="5" width="5" height="5" xlink:href="#MyS" />
<use x="10" y="10" width="10" height="10" xlink:href="#MyS" />
<use x="25" y="5" width="15" height="15" xlink:href="#MyS" />
<use x="10" y="20"    xlink:href="#MyS" />
</svg>

<image> 요소
- <image x="좌표" y="좌표" width="크기" height="크기" xlink:href="URI">

<svg width="300" height="200">
<rect x="2" y="2" width="295" height="195"
    fill="none" stroke="blue" stroke-width="2" />
<image x="5" y="5" width="100" height="190"
    xlink:href="../image/june-2.jpg" />
<image x="100" y="5" width="100" height="150"
    xlink:href="../image/june-2.jpg" />
<image x="205" y="80" width="90" height="115"
    xlink:href="../image/sblim.jpg" />
</svg>