웹스토리보이

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

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

속성

속성	설명
x	사각형의 X좌표 값을 설정합니다.
y	사각형의 Y좌표 값을 설정합니다.
width	사각형의 가로 값을 설정합니다.
height	사각형의 세로 값을 설정합니다
rx	사각형의 보더 굴곡의 X값을 설정합니다.
r	원의 반지름을 의미한다.
ry	사각형의 보더 굴곡의 Y값을 설정합니다.
cx	원의 중심 중 x 값을 의미한다.
cy	원의 중심 중 y 값을 의미한다.

샘플

<h4>샘플</h4>
<div class="svgBox">
    <svg class="svg">
        <rect class = " rect1" fill="#f48fb1" width= "100" height = "100" x="30" y="30"/>
    </svg>
    <svg class="svg">
        <rect class = " rect1" fill="#f48fb1" width= "100" height = "100" x="30" y="30" stroke="#880e4f" stroke-width ="5"/>
    </svg>
    <svg class="svg">
        <rect class = " rect1" fill="#f48fb1" width= "100" height = "100" x="30" y="30" rx="20" ry="20"/>
    </svg>
    <svg class="svg">
        <rect class = " rect1" fill="#f48fb1" width= "100" height = "100" x="30" y="30" stroke="#880e4f" stroke-width ="5" rx="20" ry="20"/>
    </svg>
</div>

샘플

<h4>샘플</h4>
<div class="svgBox">
    <svg class="svg">
        <circle fill="#f48fb1" r="60" cx="80" cy="80"/>
    </svg>
    <svg class="svg">
        <circle fill="#f48fb1" r="60" cx="80" cy="80" stroke="#880e4f" stroke-width ="5"/>
    </svg>
    <svg class="svg">
        <ellipse fill="#f48fb1" rx="60" ry="40"  cx="80" cy="80"/>
    </svg>
    <svg class="svg">
        <ellipse fill="#f48fb1" rx="60" ry="40" cx="80" cy="80" stroke="#880e4f" stroke-width ="5"/>
    </svg>
</div>

샘플

<h4>샘플</h4>
<div class="svgBox">
    <svg class="svg">
        <polygon fill="#f48fb1"points="137,146 8,107 107,15"/>
    </svg>
    <svg class="svg">
        <polygon fill="#f48fb1"points="104,145 24,126 17,43 94,12 147,75 "/>
    </svg>
    <svg class="svg">
        <polygon fill="#f48fb1" points="130,130 61,148 12,97 31,29 99,11 148,62 "/>
    </svg>
    <svg class="svg">
        <polygon fill="#f48fb1" points="131,135 85,117 45,144 48,96 10,66 57,54 74,9 107,49 148,51 117,88 "/>
    </svg>
</div>

샘플

<div class="svgBox">
<svg class="svg">
    <line x1="0" y1="0" x2 ="160" y2="160" stroke="#880e4f" stroke-width ="2" />
</svg>
<svg class="svg">
    <line x1="80" y1="80" x2 ="160" y2="160" stroke="#880e4f" stroke-width ="2" />
</svg>
<svg class="svg">
    <polygon fill="none" stroke="#880e4f" stroke-width ="2" stroke-miterlimit="10" points="30,38 91,116 133,48 3,62 119,106 "/>
</svg>
<svg class="svg">
    <polygon fill="none" stroke="#880e4f" stroke-width ="2" stroke-miterlimit="10" points="148.784,152 10,21 10,140 127,23 127,151 "/>
</svg>
</div>

샘플

<svg class="svg">
<path fill="none" stroke="#880e4f"  stroke-width ="2" d="M13,147.25C13,75.256,72.486,17,146,17"/>
</svg>
<svg class="svg">
<path fill="none" stroke="#880e4f"  stroke-width ="2" d="M150.479,122.229c-33.401,33.401-87.556,33.401-120.957,0 C2.8,95.508,2.8,52.184,29.521,25.463c21.377-21.377,56.035-21.377,77.412,0c17.102,17.102,17.102,44.829,0,61.93 c-13.681,13.682-35.862,13.682-49.543,0c-10.945-10.944-10.945-28.69,0-39.635c8.756-8.756,22.952-8.756,31.708,0 c7.004,7.005,7.004,18.362,0,25.366c-5.604,5.604-14.69,5.604-20.293,0c-4.483-4.483-4.483-11.751,0-16.234"/>
</svg>
<svg class="svg">
<path fill="none"  stroke="#880e4f"  stroke-width ="2" d="M69.884,130.723c-4.1,17.961-32.416,4.325-20.93-10.079 c-11.486,14.404-31.082-10.168-14.483-18.162c-16.599,7.994-23.592-22.647-5.169-22.647c-18.423,0-11.429-30.641,5.169-22.648 c-16.599-7.993,2.997-32.565,14.483-18.162c-11.486-14.403,16.83-28.04,20.93-10.079c-4.1-17.961,27.33-17.961,23.23,0 c4.1-17.961,32.416-4.324,20.93,10.079c11.486-14.403,31.082,10.169,14.484,18.162c16.598-7.993,23.591,22.648,5.169,22.648 c18.422,0,11.429,30.642-5.169,22.647c16.598,7.994-2.998,32.566-14.484,18.162c11.486,14.404-16.83,28.04-20.93,10.079 C97.214,148.684,65.784,148.684,69.884,130.723z"/>
</svg>
<svg class="svg">
<path fill="none" stroke="#880e4f"  stroke-width ="2" d="M64.963,152.283C78.466,93.123,73,90.491,35.166,137.935C73,90.491,69.218,85.748,14.546,112.078c54.672-26.33,53.322-32.244-7.36-32.244c60.682,0,62.032-5.915,7.36-32.243C69.218,73.919,73,69.176,35.166,21.734C73,69.176,78.466,66.544,64.963,7.384c13.503,59.16,19.569,59.16,33.073,0c-13.504,59.16-8.038,61.792,29.796,14.35c-37.834,47.442-34.052,52.186,20.62,25.857C93.78,73.919,95.13,79.834,155.812,79.834c-60.682,0-62.031,5.914-7.359,32.244c-54.672-26.33-58.454-21.587-20.62,25.856c-37.834-47.443-43.3-44.812-29.796,14.349C84.532,93.123,78.466,93.123,64.963,152.283z"/>
</svg>
<svg class="svg">
<path fill="none"  stroke="#880e4f"  stroke-width ="2" d="M20.95,10.05c4.912,4.912-4.987,14.812-0.075,19.724s14.812-4.987,19.724-0.075c4.913,4.913-4.987,14.813-0.074,19.725c4.913,4.914,14.813-4.986,19.726-0.073c4.913,4.913-4.987,14.812-0.074,19.725c4.913,4.914,14.813-4.986,19.726-0.073c4.912,4.912-4.988,14.812-0.076,19.724c4.912,4.911,14.811-4.988,19.723-0.077c4.913,4.914-4.986,14.813-0.073,19.728c4.915,4.914,14.814-4.985,19.729-0.071c4.913,4.914-4.986,14.813-0.073,19.728c4.917,4.917,14.817-4.983,19.734-0.066c4.916,4.917-4.983,14.816-0.067,19.733"/>
</svg>
<svg class="svg">
<path fill="none"  stroke="#880e4f"  stroke-width ="2" d="M79.628,88.031c-19.646,86.07-58.417,67.401-3.371-1.624c-55.046,69.025-81.875,35.383-2.333-2.926c-79.542,38.309-89.118-3.647-0.833-3.648c-88.285,0.001-78.709-41.953,0.833-3.648C-5.619,37.881,21.211,4.236,76.257,73.26c-55.046-69.023-16.274-87.695,3.371-1.624c-19.646-86.071,23.389-86.071,3.742,0c19.646-86.071,58.416-67.4,3.371,1.624c55.045-69.023,81.876-35.379,2.333,2.926c79.543-38.305,89.118,3.649,0.833,3.648c88.285,0.001,78.71,41.957-0.833,3.648c79.543,38.309,52.712,71.951-2.333,2.926c55.045,69.025,16.275,87.694-3.371,1.624C103.017,174.102,59.982,174.102,79.628,88.031z"/>
</svg>

샘플

SVG

<style>
.text-wrap{
    display: inline-block;
    background-color: #ffebee;
    width: 160px; height: 160px;
}
.text-clip {
    line-height: 170px;
    text-align: center;
    font-size:70px;
    font-family:"Black Han Sans";
    -webkit-text-fill-color : transparent;
    -webkit-background-clip: text;
    background-image:url(../../assets/img/svg.jpg);
}

.text-clip.t2 {
    background-image: linear-gradient(60deg, #ff5858 0%, #f09819 100%);
}

.text-clip3 {
    width: 160px; height: 160px;
    line-height: 170px;
    text-align: center;
    font-size:70px;
    font-family:"Black Han Sans";
    -webkit-text-fill-color : transparent;
    -webkit-text-stroke: 2px #ff5858
}
</style>

<svg class="svg">
    <image xlink:href="../../assets/img/svg-french-fries.svg" width="160" height="160"/>
</svg>
<svg class="svg">
    <image xlink:href="../../assets/img/svg-french-fries.svg" width="160" height="160" clip-path="circle(30px at center)"/>
</svg>
<svg class="svg">
    <clipPath id="clip1">
        <polygon fill="none" points="82.5,43.348 89.609,63.338 108.771,54.23 99.662,73.391 119.651,80.5 99.662,87.609 108.771,106.771 89.609,97.662 82.5,117.651 75.391,97.662 56.23,106.771 65.338,87.609 45.348,80.5 65.338,73.391 56.23,54.23 75.391,63.338 "/>
    </clipPath>
    <image xlink:href="../../assets/img/svg-french-fries.svg" width="160" height="160" clip-path="url(#clip1)" />
</svg>

<svg class="svg">
    <clipPath id="clip2">
        <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M75.977,105.796c-2.709,11.867-17.993,4.507-10.404-5.011c-7.589,9.518-18.166-3.746-7.199-9.027C47.407,97.039,43.632,80.5,55.804,80.5c-12.172,0-8.397-16.539,2.57-11.258c-10.967-5.281-0.39-18.544,7.199-9.028c-7.589-9.517,7.695-16.877,10.404-5.01c-2.709-11.867,14.256-11.867,11.547,0c2.709-11.867,17.993-4.507,10.403,5.01c7.59-9.517,18.166,3.747,7.199,9.028c10.967-5.281,14.742,11.258,2.57,11.258c12.172,0,8.396,16.539-2.57,11.258c10.967,5.281,0.391,18.545-7.199,9.027c7.59,9.518-7.694,16.878-10.403,5.011C90.232,117.663,73.268,117.663,75.977,105.796z"/>
    </clipPath>
    <image xlink:href="../../assets/img/svg-french-fries.svg" width="160" height="160" clip-path="url(#clip2)" />
</svg>
<svg class="svg">
    <text x="5" y="105" font-size="70" font-family="Black Han Sans">SVG</text>
</svg>
<svg class="svg">
    <pattern id="pattern1" patternUnites="useSpaceOnUse" width="100%" height="100%">
        <image xlink:href="../../assets/img/svg.jpg" width="160" height="160"/>
    </pattern>
    <text x="5" y="105" font-size="70" font-family="Black Han Sans" fill="url(#pattern1)">SVG</text>
</svg>
<br>
<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>

샘플

<style>
.aniRect1 { 
    stroke:#880e4f; stroke-width: 18; 
    transform-origin: center;
    animation: rect1 8s infinite ease;
}
@keyframes rect1 {
    0% {stroke:#880e4f; stroke-width: 18; transform: rotate(0deg); }
    35% {stroke:#311b92;  stroke-width: 1; transform: rotate(360deg); }
    70% {stroke:#004d40; stroke-width: 1; transform: rotate(360deg); }
    100% {stroke:#880e4f; stroke-width: 18; transform: rotate(0deg); }
}

.aniRect2 { 
    stroke:#880e4f; stroke-width: 4; 
    animation: rect2 2s infinite ease;
    stroke-dasharray: 50;                       //stroke-dasharray와 stroke-dashoffset값은 같아야 한다.
    stroke-dashoffset: 50;
    stroke-linecap: round;
}
@keyframes rect2 {
    0% {stroke:#880e4f; stroke-dasharray: 50;}
    35% {stroke:#311b92; }
    70% {stroke:#004d40; }
    100% {stroke:#880e4f; stroke-dasharray: 0;}
}

.aniRect3 { 
    stroke:#880e4f; stroke-width: 4; 
    animation: rect3 2s infinite alternate;
    stroke-dasharray: 100;                                     
    stroke-dashoffset: 100;
    stroke-linecap: round;
}
@keyframes rect3 {
    0% {stroke:#880e4f; stroke-dashoffset: 100;}
    35% {stroke:#311b92; }
    70% {stroke:#004d40; }
    100% {stroke:#880e4f; stroke-dashoffset: 0;}
}

.aniRect4 { 
    stroke:#880e4f; stroke-width: 4; 
    animation: rect4 4s infinite linear;
    stroke-dasharray: 400;                                     
    stroke-dashoffset: 400;
    stroke-linecap: round;
}
@keyframes rect4 {
    0% {stroke:#880e4f; stroke-dashoffset: 400;}
    35% {stroke:#311b92; }
    70% {stroke:#004d40; }
    100% {stroke:#880e4f; stroke-dashoffset: 0;}
}

.aniPath1 {
    fill: none; stroke:#880e4f; stroke-width: 2; stroke-linecap: round;
    animation: path1 2s infinite linear alternate-reverse;
    stroke-dasharray: 900;
}
@keyframes path1 {
    0% {stroke-dashoffset: 900;}
    100%{stroke-dashoffset: 0;}
}

.aniPath2 {
    fill: none; stroke:#880e4f; stroke-width: 2;
    animation: path2 2s infinite linear alternate-reverse;
    stroke-dasharray: 1358;
}
@keyframes path2 {
    0% {stroke-dashoffset: 1358;}
    100%{stroke-dashoffset: 0;}
}

.aniPath3 {
    fill: none; stroke:#880e4f; stroke-width: 2;
    animation: path3 4s infinite linear alternate-reverse;
    stroke-dasharray: 1887;
}
@keyframes path3 {
    0% {stroke-dashoffset: 1887;}
    100%{stroke-dashoffset: 0;}
}

.aniPath4 {
    fill: none; stroke:#880e4f; stroke-width: 2;
    animation: path4 4s infinite linear alternate-reverse;
    stroke-dasharray: 272;
}
@keyframes path4 {
    0% {stroke-dashoffset: 272;}
    100%{stroke-dashoffset: 0;}
}
</style>

See the Pen SVG - Text Animation1 by lee sejin (@iuu0304) on CodePen.

See the Pen SVG - Text Animation2 by lee sejin (@iuu0304) on CodePen.

See the Pen SVG - Text Animation3 by lee sejin (@iuu0304) on CodePen.

SVG Animation

SVG

Rect

속성

샘플

Circle

샘플

Polygon

샘플

Line, Polyline

샘플

Path

샘플

Clip-Path

샘플

dash array

샘플

Text Animation