SVG

스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다.

  • 인터넷 익스플로러 9버전 이상부터 지원됩니다.
  • XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다.
  • 벡터 방식이기 때문에 확대하거나 축소가 가능합니다.
  • DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느립니다.

rect

속성 설명
x 사각형의 X좌표 값을 설정합니다.
y 사각형의 Y좌표 값을 설정합니다.
width 사각형의 가로 값을 설정합니다.
height 사각형의 세로 값을 설정합니다
rx 사각형의 보더 굴곡의 X값을 설정합니다.
ry 사각형의 보더 굴곡의 Y값을 설정합니다. 
/*<style>
.svgBox{text-align: center; background: #775b2a; padding: 20px;}
.svg{width: 150px; height: 150px; background: rgb(255, 217, 0); vertical-align: middle; margin:0 10px;}
</style>*/

<div class="svgBox">
<svg class="svg">
    <rect class="rect1" fill="#afafaf" width="100px" height="100px" x="25px" y="25" />
</svg>
<svg class="svg">
    <rect class="rect1" fill="#afafaf" width="100px" height="100px" x="25px" y="25" stroke="#006738" stroke-width="5"/>
</svg>
<svg class="svg">
    <rect class="rect1" fill="#afafaf" width="100px" height="100px" x="25px" y="25" rx="20" ry="20"/>
</svg>
<svg class="svg">
    <rect rect class="rect1" fill="#afafaf" width="100px" height="100px" x="25px" y="25" rx="20" ry="20" stroke="#006738" stroke-width="5"/>
</svg>
</div>

circle

/*<style>
.svgBox{text-align: center; background: #775b2a; padding: 20px;}
.svg{width: 150px; height: 150px; background: rgb(255, 217, 0); vertical-align: middle; margin:0 10px;}
</style>*/

<div class="svgBox">
<svg class="svg">
<circle class="circle1" fill="#afafaf" r="60" cx="75" cy="75" />
</svg>
<svg class="svg">
<circle class="circle2" fill="#afafaf" r="60" cx="75" cy="75" stroke="#006738" stroke-width="5"/>
</svg>
<svg class="svg">
<ellipse fill="#afafaf" rx="60" ry="40" cx="75" cy="75" />
</svg>
<svg class="svg">
<ellipse fill="#afafaf" rx="60" ry="40" cx="75" cy="75" stroke="#006738" stroke-width="5"/>
</svg>
</div>

polygon

/*<style>
.svgBox{text-align: center; background: #775b2a; padding: 20px;}
.svg{width: 150px; height: 150px; background: rgb(255, 217, 0); vertical-align: middle; margin:0 10px;}
</style>*/

<div class="svgBox">
<svg class="svg">
<polygon fill="#376993" points="137.429,146.452 8.545,107.076 107.086,15.147 " />
</svg>
<svg class="svg">
<polygon fill="#376993" points="104.314,145.458 24.204,126.031 17.926,43.837 94.157,12.467 147.548,75.272 "/>
</svg>
<svg class="svg">
<polygon fill="#376993" points="130,130.5 61.516,148.118 12.016,97.618 31,29.5 99.484,11.882 148.984,62.382 "/>
</svg>
<svg class="svg">
<polygon fill="#376993" points="131,135.5 85.951,117.744 45.785,144.789 48.75,96.457 10.618,66.615 57.5,54.5 74.099,9.012 
100.107,49.855 148.499,51.585 117.691,88.942 "/>
</svg>
</div>

line, polygon

<div class="svgBox">
    <svg class="svg">
        <line stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="10.417" y1="13.417" x2="139.584" y2="142.584"/>
    </svg>
    <svg class="svg">
        <line stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="75" y1="78" x2="139.584" y2="142.584"/>
    </svg>
    <svg class="svg">
        <polyline fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" points="70.667,13.664 18,59.33 115.333,23.664 
24.667,99.997 141.667,53.664 31.333,137.663 147.333,95.663 10,13.664 10,133.663 "/>
    </svg>
    <svg class="svg">
        <polyline fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" points="38.333,124.33 116,49.33 18,57.664 
        120.333,115.663 62.333,18.33 38.667,136.997 141,49.997 "/>
    </svg>
</div>

path

<div class="svgBox">
    <svg class="svg">
        <path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M23.333,122.663
c0-51.036,48.454-92.333,108.333-92.333"/>
    </svg>
    <svg class="svg">
        <path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M10.667,62.33c15.28-35.53,56.47-51.947,92-36.667
c28.425,12.224,41.558,45.176,29.333,73.6c-9.779,22.74-36.141,33.246-58.88,23.467c-18.192-7.823-26.597-28.913-18.773-47.104
c6.259-14.553,23.13-21.277,37.684-15.019c11.643,5.007,17.021,18.504,12.015,30.146c-4.006,9.314-14.804,13.618-24.117,9.612
c-7.452-3.204-10.894-11.843-7.69-19.294c2.564-5.961,9.474-8.715,15.435-6.151c4.77,2.051,6.973,7.579,4.922,12.348"/>
    </svg>
    <svg class="svg">
        <path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M118.401,113.25
c15.201,13.5-6.014,30.308-15.68,12.423c9.666,17.885-16.016,26.423-18.982,6.312c2.967,20.111-24.088,19.352-19.998-0.563
c-4.091,19.914-29.253,9.945-18.598-7.367c-10.655,17.313-30.892-0.659-14.957-13.284c-15.935,12.625-28.803-11.185-9.512-17.599
c-19.291,6.414-23.24-20.361-2.919-19.79c-20.321-0.571-14.875-27.083,4.026-19.595c-18.9-7.487-4.715-30.537,10.485-17.037
c-15.2-13.5,6.013-30.308,15.679-12.423C38.28,6.442,63.963-2.096,66.929,18.016C63.963-2.096,91.019-1.336,86.927,18.578
c4.092-19.914,29.255-9.946,18.599,7.367c10.656-17.313,30.892,0.659,14.956,13.284c15.936-12.625,28.803,11.185,9.512,17.599
c19.291-6.414,23.24,20.361,2.918,19.791c20.322,0.57,14.875,27.081-4.025,19.595C147.786,103.7,133.603,126.75,118.401,113.25z"/>
    </svg>
    <svg class="svg">
        <path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M134.833,115.616
c-15.609-10.465-30.322,4.202-19.906,19.845c-10.416-15.643-29.622-7.723-25.985,10.715c-3.637-18.438-24.412-18.472-28.107-0.046
c3.695-18.426-15.485-26.405-25.95-10.796c10.465-15.609-4.202-30.323-19.843-19.907c15.642-10.416,7.722-29.622-10.714-25.985
c18.437-3.637,18.469-24.412,0.044-28.107c18.425,3.695,26.406-15.485,10.797-25.951c15.608,10.466,30.322-4.201,19.906-19.843
C45.49,31.182,64.696,23.263,61.059,4.826c3.637,18.437,24.412,18.47,28.107,0.044c-3.695,18.426,15.485,26.406,25.95,10.798
c-10.465,15.608,4.202,30.322,19.843,19.906c-15.641,10.416-7.722,29.622,10.716,25.985c-18.438,3.637-18.471,24.412-0.045,28.107
C127.204,85.971,119.224,105.151,134.833,115.616z"/>
    </svg>
    <svg class="svg over">
        <path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M29.809,3.188
        c4.486,4.486-23.798,32.77-19.313,37.256c4.486,4.486,32.771-23.798,37.256-19.312c4.487,4.486-23.798,32.771-19.311,37.257
        c4.487,4.487,32.771-23.797,37.258-19.31c4.487,4.486-23.798,32.771-19.311,37.258c4.486,4.485,32.771-23.799,37.256-19.313
        c4.486,4.486-23.799,32.77-19.313,37.256c4.486,4.485,32.771-23.799,37.257-19.313c4.486,4.487-23.799,32.771-19.312,37.258
        c4.488,4.489,32.773-23.795,37.263-19.307c4.487,4.487-23.798,32.772-19.311,37.26c4.49,4.49,32.775-23.795,37.266-19.305
        S113.7,143.649,118.19,148.14"/>
    </svg>
    <svg class="svg over">
        <path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M80.812,77.276
c74.086,48.105,53.502,70.513-1.314,1.431c54.816,69.082,27.901,83.434-1.718,0.916c29.619,82.518-0.715,87.257-1.936,0.302
c1.221,86.955-29.243,81.571-1.944-0.343c-27.299,81.914-54.593,66.982-1.742-0.953c-52.851,67.936-74.017,45.084-1.351-1.459
c-72.666,46.543-85.41,18.244-0.813-1.806c-84.597,20.05-87.536-10.63-0.188-1.958c-87.349-8.672-80.168-38.409,0.458-1.898
c-80.626-36.511-64.102-62.081,1.055-1.632C6.161,9.427,30.239-9.208,72.854,68.686c-42.615-77.894-13.595-87.572,1.852-0.618
c-15.447-86.954,15.372-86.626,1.967,0.021c13.404-86.647,42.684-76.351,1.869,0.657c40.814-77.008,65.381-57.857,1.568,1.222
c63.813-59.079,81.003-33.149,1.097,1.655c79.906-34.805,87.855-4.906,0.508,1.909c87.348-6.814,85.196,23.812-0.138,1.955
C166.912,97.344,154.897,125.382,80.812,77.276z"/>
    </svg>
</div>

clip-path

<div class="svgBox">
    <svg class="svg">
       <image xlink:href="../../assets/img/svg-french-fries.svg" width="150" height="150"></image>
    </svg>
    <svg class="svg">
        <image xlink:href="../../assets/img/svg-french-fries.svg" width="150" height="150" clip-path="circle(40px at center)"></image>
    </svg>
    <svg class="svg">
        <clipPath id="clip1">
            <polygon fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" points="33.751,42.226 62.153,50.865 73.001,23.231 
83.955,50.824 112.324,42.077 97.581,67.844 122.107,84.57 92.77,89.109 94.984,118.713 73.144,98.606 51.379,118.796 
53.482,89.184 24.128,84.755 48.591,67.936 "/>
        </clipPath>
        <image xlink:href="../../assets/img/svg-french-fries.svg" width="150" height="150" clip-path="url(#clip1)"></image>
    </svg>
    <svg class="svg">
        <clipPath id="clip2">
            <path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M97.609,93.057
c18.885,17.641,4.378,28.871-7.812,6.047c12.189,22.824-5.179,28.736-9.353,3.184c4.174,25.553-14.173,25.506-9.878-0.025
c-4.295,25.531-21.631,19.528-9.335-3.231c-12.296,22.76-26.745,11.454-7.78-6.089c-18.965,17.543-28.959,2.158-5.382-8.283
c-23.577,10.441-28.035-7.356-2.4-9.583c-25.635,2.227-24.073-16.052,0.841-9.843c-24.914-6.209-17.5-22.992,3.992-9.037
c-21.492-13.955-9.031-27.42,6.71-7.25c-15.741-20.17,0.417-28.86,8.7-4.679c-8.283-24.181,9.821-27.153,9.749-1.601
c0.072-25.553,18.161-22.486,9.739,1.651c8.422-24.137,24.533-15.363,8.676,4.725c15.857-20.088,28.248-6.557,6.672,7.286
c21.576-13.843,28.902,2.977,3.945,9.057c24.957-6.08,26.425,12.208,0.79,9.847c25.635,2.361,21.085,20.135-2.45,9.571
C126.569,95.365,116.494,110.697,97.609,93.057z"/>
        </clipPath>
        <image xlink:href="../../assets/img/svg-french-fries.svg" width="150" height="150" clip-path="url(#clip2)"></image>
    </svg>
</div>

pattern

SVG
SVG
SVG
SVG 
<style>
    .textBox{
        background: #775b2a;
        padding: 20px;
        text-align: center;
    }
    .text-wrap {
        display: inline-block;
        /* padding: 0 10px; */
        margin: 0 10px;
        background-color: #ffebee;
        width: 150px;
        height: 150px;
    }

    .text-clip {
        background-color: #edffdf;
        width: 150px;
        height: 150px;
        line-height: 170px;
        /* text-align: center; */
        font-size: 60px;
        font-family: "Black Han Sans";
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        background-image: url(../../assets/img/svg-french-fries.svg);
        background-size: cover;
    }
</style>

<div class="svgBox">
    <svg class="svg">
        <text x="10" y="100" font-size="60" font-family="Black Han Sans">SVG</text>
    </svg>
    <!--<svg class="svg">
        <pattern id="pattern1" patternUnits="useSpaceOnUse" width="150" heigth="150">
            <image xlink:href="../../assets/img/svg-french-fries.svg" width="150" height="150">
            </image>
        </pattern>
        <text x="10" y="100" font-size="60" font-family="Black Han Sans"
            fill="url(#pattern1)">SVG</text>
    </svg>-->
</div>

<div class="text-wrap">
    <div class="text-clip">
        SVG
    </div>
</div>
<div class="text-wrap">
    <div class="text-clip t2">
        SVG
    </div>
</div>
<div class="text-wrap">
    <div class="text-clip3">
        SVG
    </div>
</div>

Animation

.aniRect1{ stroke: #ffc2e2; stroke-width: 2; 
    animation: rect1 4s infinite ease-in-out;
    }
    @keyframes rect1{
        0%{stroke: #880e4f;}
        10%{stroke: #fac6e2;}
        20%{stroke: #00f7ff;}
        35%{stroke: #311b92;}
        35%{stroke: #ff0000;}
        70%{stroke: #00b7ff;}
        80%{stroke: #a3a3a3;}
        90%{stroke: #7d009c;}
        100%{stroke: #ffee00;}
    }

    .aniRect2{ stroke: #ffc2e2; stroke-width: 18; 
    animation: rect2 4s infinite ease-in-out; 
    transform-origin: center center;
    }
    @keyframes rect2{
        0%{stroke: #ffffff; stroke-width: 18; transform: rotate(0deg);}
        35%{stroke: #746b9c; stroke-width: 1; transform: rotate(3600deg);}
        70%{stroke: #1b7092; stroke-width: 4; transform: rotate(3600deg);}
        100%{stroke: #91fcd8; stroke-width: 18; transform: rotate(0deg);}
    }

    .aniRect3{ stroke: #dbc5d0; stroke-width: 4; 
    animation: rect3 4s infinite ease-in-out;
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    stroke-linecap: round;
    }
    @keyframes rect3{
        0%{stroke: #880e4f;  stroke-dashoffset: 50;}
        35%{stroke: #311b92;}
        70%{stroke: #1b7092;}
        100%{stroke: #1b926a;  stroke-dashoffset: 0;}
    }

    .aniRect4{ stroke: #dbc5d0; stroke-width: 4; 
    animation: rect4 4s infinite ease-in-out alternate;
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    stroke-linecap: round;
    }
    @keyframes rect4{
        0%{stroke: #880e4f;  stroke-dashoffset: 50;}
        35%{stroke: #311b92;}
        70%{stroke: #1b7092;}
        100%{stroke: #1b926a;  stroke-dashoffset: 0;}
    }

    .aniRect5{ stroke: #dbc5d0; stroke-width: 4; 
    animation: rect5 4s infinite ease-in-out ;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    stroke-linecap: round;
    }
    @keyframes rect5{
        0%{stroke: #b9b600;  stroke-dashoffset: 400;}
        35%{stroke: #ffffff; stroke-width: 30;}
        70%{stroke: #0400ff; stroke-width: 3;}
        85%{stroke: #fff38b; stroke-width: 1;}
        100%{stroke: #ff0000;  stroke-dashoffset: 0;}
    }

    .aniRect6{ stroke: #dbc5d0; stroke-width: 4; 
    animation: rect6 4s infinite ease-in-out alternate;
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    }
    @keyframes rect6{
        0%{stroke: #880e4f;  stroke-dashoffset: 100;}
        35%{stroke: #311b92;}
        70%{stroke: #1b7092;}
        100%{stroke: #1b926a;  stroke-dashoffset: 300;}
    }

    .aniPath1{
        fill: none; stroke: rgb(0, 0, 0); stroke-width: 2; stroke-linecap: round;
        animation: path1 2s infinite linear alternate-reverse;
        stroke-dasharray: 100; stroke-dashoffset: 0;
    }
    @keyframes path1{
        0%{stroke-dashoffset: 800;}
        100%{stroke-dashoffset: 0;}
    }

    .aniPath2{
        fill: none; stroke: rgb(0, 0, 0); stroke-width: 2; stroke-linecap: round;
        animation: path2 5s infinite linear ;
        stroke-dasharray: 2522.052978515625; stroke-dashoffset: 0;
    }
    @keyframes path2{
        0%{stroke-dashoffset: 2522.052978515625;}
        100%{stroke-dashoffset: 0;}
    }

SVG-Text Animation1

See the Pen SVG-Text Animation by HyunJi (@ahjee12) on CodePen.

SVG-Text Animation2

See the Pen SVG-Text Animation2 by HyunJi (@ahjee12) on CodePen.

SVG-Text Animation3

See the Pen OJyrmKa by HyunJi (@ahjee12) on CodePen.