SVG 탐험하기

myang ·2020년 8월 2일
0

설명

svg는 이미지가 아닌 문서이다. Scalable Vector Graphics로 불리우며, 백터 이미지를 표현하기 위한 포맷으로 확대를 하여도 이미지가 이미지가 깨지지 않는 특성이 있다.

그래픽을 마크업 할 수 있고 SVG는 CSS가 아니지만 CSS를 이용하여 다양한 효과를 줄 수 있다.

ex)

<svg width="210" height="210">
  <rect x="5" y="5" width="200" height="200" style="fill:red; stroke:black; stroke-width:10px"></rect>
</svg>

MDN Tutorial

  1. 시작하기

    <svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="red" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>
유효성 검사를 위해 SVG 버젼을 식별할려면 항상 `version`, `baseProfile`  을 항상 정의해야 한다.

전체 이미지는 영역을 나타내는것은 `<rect />` 을 이용하여 표현한다.

원은 `<circle />` 을 이용하여 그린다. 중심점의 지점을 `text-anchor` 로 표현 할 수 있고 폰트 사이즈 또한 조정 가능하다.

  1. 그리드

    왼쪽 모서리 상단을 (0,0) 으로 한다.

    그리고 지점은 왼쪽 모서리를 기반으로 픽셀 단위로 표시된다.

    픽셀이란?

    기본적으로 SVG 상에서의 1픽셀은 화면의 1픽셀과 매칭된다. 

    <svg width="100" height="100">

    따라서 위와 같은 SVG 는 (100 x 100)px 의 캔버스를 정의한다

    viewBox

    ![https://images.velog.io/images/myungwoo/post/88b4f9c7-28fa-40e6-99d4-fd438c369695/telescope.jpg)

    viewBox는 망원경과 같이 뷰포트에서 보이는 것들을 줌하거나 pan? 하게 할 수 있다.

    viewBox 특수한 container 요소에 맞추기 위해 graphic 을 늘리거나 줄이는 요소들을 가진 집합을 명시한다.

    viewBox는 SVG 뿐만아니라 symbol, marker, pattern and view와 같은 다양한 elemens 에도 사용 할 수 있다.

    viewBox는 다음과 같은 요소들을 지닌다.

    viewBox = "<min-x>, <min-y>, <width>, <height>"

    • min-x

      viewBox의 x좌표

    • min-y

      viewBox의 y좌표

    • width

      viewBox의 width

    • height

      viewBox의 height

    이때 width 와 height 이 뷰포트의 이미지를 어떻게 Zoom 할지 결정해준다.

    • width 와 height 이 기존보다 작다면 zoom
    • 크다면 zoom-out
    • 시작 좌표를 다르게 하여 panning 도 구현할 수 있다

    튜토리얼 사이트


    min-x, min-y 를 이용해서 viewBox의 왼쪽 모서리의 가장 윗 부분좌표를 설정한다.

    또 width, height를 이용해서 어느 영역까지 viewBox를 생성 시킬 지 설정한다.

    간단하게 생각하기

    뷰박스란 기존 하얀색 캔버스 위에 내가 어떤 영역을 바라볼지 정한다고 생각하면 된다.

    위에서 원이 그려진 캔버스가 전체 SVG라고 생각하고 빨간색 박스가 내가 보고싶은 영역인 뷰박스라고 생각하면 된다.

    ex)

    viewBox가 없을때의 모습

    <svg width="300" height="200">
    <circle cx="150" cy="100" r="80" fill="green" />
</svg>

    viewBox 설정 후 모습

    <svg width="300" height="200" viewBox="0 0 100 100">
    <circle cx="150" cy="100" r="80" fill="green" />
</svg>

    viewBox 가 최대 (100, 100) 까지 볼수있어 원의 일부가 짤려버린것을 확인 할 수 있다. 이 잘려진 원이 일부를 다시 정의한 width, height에 맞게 확대하여 나타낸다.

  2. 기본 형태

    Rectangles

    화면에 사각형을 표시한다.

    <rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>

    Circle

    화면에 원을 표시한다.

    <circle cx="25" cy="75" r="20"/>

    Ellipse

    화면에 타원을 표시한다.

    원과는 다르게 x, y 방향에 대한 반지름을 각각 가진다.

    <ellipse cx="75" cy="75" rx="20" ry="5"/>

    Line

    단순한 직선을 표시한다.

    시작점과 끝 지점을 명시하면 두 지점이 연결된 직선이 만들어진다.

    <line x1="10" x2="50" y1="110" y2="150"/>

    Polyline

    직선들의 그룹을 의미한다. 직선들이 길어질 수 있다고 가정하기 때문에 하나의 포인트를 속성으로 표시할 수 있다.

    <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>

    Polygon

    직선들로 구성되었다는 점에서 Polyline 과 매우유사하다. 하지만 Polygon의 경우 다각형을 만들어야 하기 때문에 반드시 마지막 포인트로부터 첫 번째 포인트가 닫힌 모양을 만든다.

    사각형은 다각형의 한 예이므로 Polygon을 이용해서 만들 수 있다

    <polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>

    Path

    SVG에서 사용할수 있는 가장 일반적인 형태이다. 이 요소를 사용해서 사각형, 원, 타원, 폴리라인 및 다각형을 그릴 수 있다. 기본적으로 모든 모양을 만들 수 있다고 생각하면된다.

    직선으로만 이루어진 도형은 Polyline으로도 그릴 수 있지만 곡선을 표시하고 싶으면 Path를 사용하면 된다.

  3. 채우기 및 선 그리기

    Painting

    SVG에서는 fill 을 사용해서 원하는 색을 채울 수 있다.

    stroke 는 그려진 객체의 둘레의 색깔을 설정할 수 있게 해준다.

    색상은 html 에서의 rgb 값을 그대로 사용해도 동일한 결과를 얻을 수 있다.

    <rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple"
       fill-opacity="0.5" stroke-opacity="0.8"/>

    Stroke

    stroke 의 다양한 설정을 할 수 있는 property 에 대해서 살펴보자.

    지금부터 stroke를 둘레라고 칭해서 표현해 보겠다.

    1. stroke-width

      둘레의 두께를 설정 할 수 있다.

    2. stroke-linecap

      둘레의 모양을 꾸며줄 수 있다.

      • butt

        라인의 끝에는 둘레를 추가하지 않는다.

      • square

        라인 끝에도 둘레를 추가한다.

      • round

        라인의 끝을 둥글게 해준다.

      위에서 부터 순서대로 butt, square, round 이다.

    3. stroke-linejoin

      두 라인이 만날때 어떤 모양으로 둘레를 형성할지 결정한다.

      • miter

        라인이 만나는 지점에 사각형이 생기게 만들어 준다.

      • round

        라인이 만나는 지점을 둥글게 해준다.

      • bevel

        두 라인이 만나는 접점에 새로운 각도를? 형성한다. MDN에 써있는 내용이 좀 난해한듯 하다.

    4. stroke-dasharray

      둘레를 "- - - -" 와 같은 dashed line 으로 표현 할 수 있게 해주는 요소이다.

      이 요소는 comma-separated 한 인자를 이용하여 dashed line을 표현한다.

      인자의 개수에 따라서 그려지는 방식이 다른데,

      stroke-dasharry = "a, b, c" 라고 할 경우

      • 인자가 1개인 경우

        a 만큼 fill,empty 를 반복한다.

      • 인자가 2개인 경우

        a 만큼 fill, b 만큼 empty를 계속 반복한다.

      • 인자가 3개 이상인 경우

        먼저 a만큼 fill, b만큼 empty, c만큼 fill 한뒤 다음 반복에는 a 만큼 empty, b만큼 fill, c 만큼 empty 하게 한다. 다음에는 또 반대로 색칠하여 반복한다.

      <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
    stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/>
  <path d="M 10 75 L 190 75" stroke="red"
    stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/>
</svg>

    위 코드를 이용하면 쉽게 그래프를 확인해 볼 수 있다.

Refrence

https://opentutorials.org/course/2418/13666

https://ryujek.tistory.com/entry/viewBox

https://webdesign.tutsplus.com/tutorials/svg-viewport-and-viewbox-for-beginners--cms-30844

profile
myang
깊은 고민을 즐기는 프론트엔드 개발자입니다.
이전 포스트

ESLint를 VSCode 에서 적용해보기

0개의 댓글