Mark Up/Html SVG
    Dexter_-   2018. 10. 11. 11:39
  • 728x90
    반응형


    SVG



    svg 요소


    svg 요소는 Scalable Vector Graphics를 의미하며, XML 기반의 W3C 그래픽 표준 권고안이다.

    기존에 사용해 왔던 canvas 요소로는 벡터(vector) 이미지를 표현할 수 없었다.


    하지만 svg 요소는 픽셀 기반인 웹 페이지에서 픽셀의 영향을 받지 않는 벡터 이미지를 표현할 수 있게 해준다.

    따라서 이 요소는 도표나 그래프 등 벡터 기반의 다이어그램(diagram)를 표현하는 데 매우 효과적이다.


    svg요소를 지원하는 주요 웹 브라우저의 버전은 다음과 같다.


     요소

     

     

     

     

    svg

    9.0

    4.0

    3.0

    3.2

    10.1



    사각형 그리기


    다음 예제는 rect 요소를 사용하여 사각형을 그리는 예제이다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML5 Multimedia SVG</title>
    </head>
     
    <body>
     
        <h1>svg 요소를 이용한 사각형 그리기</h1>
        <svg width="200" height="150">
            <rect width="200" height="150" stroke="orange" stroke-width="5" fill="yellow"/>
            이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다!
        </svg>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    svg 요소를 이용한 사각형 그리기

    이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다!


    사각형을 그리는데 사용하는 rect 요소의 속성은 다음과 같다.


    속성

    설명

    width

    도형의 너비를 설정함.

    height

    도형의 높이를 설정함.

    stroke

    도형의 테두리 색상을 설정함.

    stroke-width

    도형의 테두리 굵기를 설정함.

    fill

    도형을 채울 색상을 설정함.

    opacity

    도형의 투명도를 설정함.


    위와 같이 각각의 속성을 사용하여 설정할 수도 있으며, 다음 예제와 같이 style 속성을 사용하여 한 번에 설정할 수도 있다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML5 Multimedia SVG</title>
    </head>
     
    <body>
     
        <h1>svg 요소를 이용한 사각형 그리기</h1>
        <svg width="200" height="150">
            <rect width="200" height="150" style="stroke:orange; stroke-width:5; fill:yellow; opacity:1;"/>
            이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다!
        </svg>
     
    </body>
     
    </html>
    		cs


    rect 요소에  x, y, rx, ry 속성을 추가하여 모서리가 둥근 사각형을 그릴 수 있다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML5 Multimedia SVG</title>
    </head>
     
    <body>
     
        <h1>svg 요소를 이용한 모서리가 둥근 사각형 그리기</h1>
        <svg width="250" height="200">
            <rect width="200" height="150" x="20" y="20" rx="20" ry="20" stroke="orange" stroke-width="5" fill="yellow"/>
            이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다!
        </svg>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    svg 요소를 이용한 모서리가 둥근 사각형 그리기

    이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다!


    모서리가 둥근 사각형을 그리는데 사용하는 rect 요소의 속성은 다음과 같다.


    속성

    설명

    x

    사각형의 왼쪽 위 꼭지점의 x좌표를 설정함.

    y

    사각형의 왼쪽 위 꼭지점의 y좌표를 설정함.

    rx

    사각형 모서리 굴곡의 x축 반지름을 설정함.

    ry

    사각형 모서리 굴곡의 y축 반지름을 설정함.



    선 그리기


    다음 예제는 line 요소를 사용하여 선을 그리는 예제이다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML5 Multimedia SVG</title>
    </head>
     
    <body>
     
        <h1>svg 요소를 이용한 선 그리기</h1>
        <svg width="250" height="200">
            <line x1="50" y1="50" x2="200" y2="150" stroke="orange" stroke-width="5"/>
            이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다!
        </svg>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    svg 요소를 이용한 선 그리기

    이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다!


    선을 그리는데 사용하는 line 요소의 속성은 다음과 같다.


    속성

    설명

    x1

    선이 시작될 위치의 x좌표를 설정함.

    y1

    선이 시작될 위치의 y좌표를 설정함.

    x2

    선이 끝나는 위치의 x좌표를 설정함.

    y2

    선이 끝나는 위치의 y좌표를 설정함.



    원 그리기


    다음 예제는 circle 요소를 사용하여 원을 그리는 예제이다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML5 Multimedia SVG</title>
    </head>
     
    <body>
     
        <h1>svg 요소를 이용한 원 그리기</h1>
        <svg width="300" height="300">
            <circle cx="150" cy="120" r="100" stroke="orange" stroke-width="5" fill="yellow"/>
            이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다!
        </svg>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    svg 요소를 이용한 원 그리기

    이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다!


    원을 그리는데 사용하는 circle 요소의 속성은 다음과 같다.



    속성

    설명

    cx

    원의 중심 x좌표를 설정함.

    cy

    원의 중심 y좌표를 설정함.

    r

    원의 반지름을 설정함.



    타원 그리기


    다음 예제는 ellipse 요소를 사용하여 타원을 그리는 예제이다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML5 Multimedia SVG</title>
    </head>
     
    <body>
     
        <h1>svg 요소를 이용한 타원 그리기</h1>
        <svg width="300" height="300">
            <ellipse cx="150" cy="100" rx="120" ry="70" stroke="orange" stroke-width="5" fill="yellow"/>
            이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다!
        </svg>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    svg 요소를 이용한 타원 그리기

    이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다!


    타원을 그리는데 사용하는 ellipse 요소의 속성은 다음과 같다.



    속성

    설명

    cx

    타원 중심의 x좌표를 설정함.

    cy

    타원 중심의 y좌표를 설정함.

    rx

    타원의 x축 반지름을 설정함.

    ry

    타원의 y축 반지름을 설정함. 



    다각형 그리기


    다음 예제는 polygon 요소를 사용하여 별모양의 다각형을 그리는 예제이다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML5 Multimedia SVG</title>
    </head>
     
    <body>
     
        <h1>svg 요소를 이용한 다각형 그리기</h1>
        <svg width="300" height="300">
            <polygon points="10,100 190,100 30,200 100,40 170,200"
                stroke="orange" stroke-width="5" fill="yellow"/>
            이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다!
        </svg>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    svg 요소를 이용한 다각형 그리기

    이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다!


    다각형을 그리는데 사용하는 polygon 요소의 속성은 다음과 같다.



    속성

    설명

    points

    다각형의 각 꼭지점이 표시될 위치의 좌표를 설정함.


    points 속성은 다각형을 이루는 각 꼭지점의 x좌표와 y좌표를 명시한다.

    이때 첫 번째 꼭지점부터 시작하여 마지막 꼭지점까지 차례대로 선으로 연결되어 다각형을 표현하게 된다.


    728x90
    반응형
    저작자표시 비영리 변경금지

    'Mark Up > Html' 카테고리의 다른 글

    Geolocation  (0) 2018.10.11
    Canvas vs SVG  (0) 2018.10.11
    Canvas  (0) 2018.10.10
    플러그인  (0) 2018.10.10
    멀티미디어 파일 형식/비디오 (video)/오디오(audio)  (0) 2018.10.10

    관련글 관련글 더보기

Designed by Tistory.
상단으로

티스토리툴바