[svg] SVG 101

What is SVG? [1]

Scalable Vector Graphics
2차원 그래픽을 그리기 위한 XML 형식의 마크업 언어.

특징

• CSS 와 JS 로 수정이 가능하다.
• 확대해도 화질이 깨지지 않는다.
• script tag 를 넣을 수 있다.

add SVG

기본 html tag 방식

    <svg xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink" 
 width="300" 
 height="300">
</svg>

background-image

.canvas {
  width: 300px;
  height: 120px;
  outline: 2px solid red;
  background:  url(nana.png) no-repeat top left;
  background-size: contain;
  background-image: url(nana.svg); /*fallback*/
}

위 두 방법은 CSS로 내부를 제어 할 수 없다.. 되도록이면 object tag로 하는게 나은 듯.

How to add SVG (external source)

1. Namespace를 이용하는 방법[2]

   var SVG=function(h,w){
   var NS="http://www.w3.org/2000/svg";
   var svg=document.createElementNS(NS,"svg");
   svg.width=w;
   svg.height=h;
   return svg;
   }
   
   var svg=SVG(200,500);
   document.body.appendChild(svg);

2. Object tag로 넣기

    <object data="algerie.svg" type="image/svg+xml"></object>

   id 등 각 DOM 의 property가 다 불러와지지 않는 듯 하다..

# How to style SVG [[1]] 1. svg 자체에 스타일 넣기 ```html ```

2. 외부 스타일리스트 svg 파일에 직접 넣기
   xml-stylesheet tag를 최상단에 넣을것!

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="style.css"?> /* 외부 스타일시트 연결 */

<svg>
  <path class="visited" d="....."/>
  <path class="special" d="....."/>
</svg>

References

[1] SVG 다루기
[2] SVG, JavaScript and the DOM
[3] Using Javascript with SVG