svg

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

rect

속성

속성 설명
x 사각형의 X좌표 값을 설정합니다.
y 사각형의 Y좌표 값을 설정합니다.
width 사각형의 가로 값을 설정합니다.
height 사각형의 세로 값을 설정합니다
rx 사각형의 보더 굴곡의 X값을 설정합니다.
ry 사각형의 보더 굴곡의 Y값을 설정합니다.

샘플

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

circle

샘플

<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>

polygon

샘플

<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 100,49 148,51 117,88"/>
</svg>

line, polyline(선)

<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">
    <polyline fill="none" stroke = "#880e4f" stroke-width = "2" points="13,8 18,129 141,19 143,126 44,13 "/>
</svg>
<svg class="svg">
    <polyline fill="none" stroke = "#880e4f" stroke-width = "2" points="21,18 21,114 118,17 27,20 110,114 "/>
</svg>

path

/> 
<svg class="svg">
<path fill="none" stroke = "#880e4f" stroke-width = "2" d="M20.332,115.037c0-53.278,54.818-96.39,122.563-96.39"/>
</svg>
<svg class="svg">
    <path fill="none" stroke = "#880e4f" stroke-width = "2" d="M137.281,106.406c-24.178,24.178-63.377,24.178-87.555,0
    c-19.342-19.342-19.342-50.702,0-70.044c15.474-15.474,40.562-15.474,56.035,0c12.379,12.379,12.379,32.449,0,44.828
    c-9.903,9.904-25.959,9.904-35.862,0c-7.923-7.922-7.923-20.767,0-28.689c6.338-6.338,16.614-6.338,22.952,0
    c5.07,5.07,5.07,13.291,0,18.362c-4.057,4.056-10.633,4.056-14.689,0c-3.245-3.245-3.245-8.506,0-11.751"/>
</svg>
<svg class="svg">
    <path fill="none" stroke = "#880e4f" stroke-width = "2" d="M82.525,75.434c9.721,89.658-30.76,84.924-0.616-0.072
    c-30.144,84.997-64.56,63.167-0.524-0.332c-64.036,63.5-85.574,28.899-0.327-0.527c-85.247,29.426-89.64-11.092-0.067-0.617
    C-8.582,63.41,5.042,24.999,81.198,73.301c-76.156-48.302-47.217-76.998,0.44-0.437c-47.657-76.561-9.131-89.86,0.587-0.203
    c-9.718-89.657,30.761-84.923,0.616,0.072c30.145-84.995,64.562-63.166,0.524,0.333c64.037-63.498,85.575-28.898,0.327,0.527
    c85.248-29.425,89.64,11.093,0.067,0.617c89.572,10.476,75.95,48.888-0.208,0.585c76.158,48.303,47.218,77-0.44,0.437
    C130.771,151.794,92.246,165.092,82.525,75.434z"/>
</svg>
<svg class="svg">
    <path fill="none" stroke = "#880e4f" stroke-width = "2" d="M123.23,124.246C70.253,52.317,80.099,48.11,93.693,136.867
    c-13.594-88.757-2.92-87.908-32.022-2.549c29.103-85.359,38.159-79.645-27.168-17.143C99.83,54.673,105.193,63.94,18.411,89.375
    c86.782-25.435,87.225-14.736-1.327-32.095c88.552,17.358,83.973,27.037,13.739-29.036c70.234,56.073,61.68,62.516,25.66-19.326
    c36.021,81.841,25.453,83.57,31.703-5.187c-6.25,88.757-16.411,85.377,30.48,10.14C71.775,89.108,64.35,81.395,140.941,37.014
    c-76.591,44.38-79.582,34.098,8.971,30.845c-88.552,3.253-86.421-7.241-6.393,31.48C63.491,60.619,70.253,52.317,123.23,124.246z"
    />
</svg>
<svg class="svg">
    <path fill="none" stroke = "#880e4f" stroke-width = "2" d="M2.982,145.907c0-2.383,56.017-2.854,56.176-5.199
    c0.161-2.375-55.273-10.424-54.954-12.756c0.323-2.355,55.881,4.805,56.36,2.496c0.483-2.324-53.334-17.869-52.698-20.141
    c0.64-2.285,54.704,12.385,55.494,10.16c0.793-2.234-50.42-24.932-49.481-27.102c0.94-2.172,52.55,19.613,53.631,17.51
    c1.082-2.104-46.68-31.379-45.462-33.409c1.216-2.027,49.547,26.302,50.894,24.353c1.343-1.943-42.273-37.101-40.806-38.961
    c1.463-1.855,45.841,32.338,47.422,30.571c1.575-1.76-37.354-42.049-35.668-43.717c1.678-1.66,41.565,37.684,43.348,36.12
    c1.773-1.556-32.054-46.216-30.181-47.672c1.862-1.448,36.833,42.325,38.788,40.979c1.943-1.337-26.457-49.632-24.426-50.863
    c2.016-1.223,31.727,46.278,33.823,45.165c2.082-1.106-20.652-52.313-18.496-53.308c2.141-0.986,26.326,49.553,28.535,48.68
    c2.191-0.866-14.705-54.286-12.449-55.036c2.234-0.743,20.701,52.155,22.994,51.529c2.271-0.62-8.686-55.567-6.359-56.068
    c2.301-0.495,14.93,54.093,17.279,53.718c2.322-0.371-2.676-56.178-0.309-56.427c2.34-0.247,9.092,55.375,11.469,55.251
    c2.35-0.123,3.256-56.146,5.639-56.146"/>
    />
</svg>
<svg class="svg">
    <path fill="none" stroke = "#880e4f" stroke-width = "2" d="M102.113,99.854c-19.955-2.738-34.095-7.314-47.375-15.329
    c2.661-12.763,6.321-24.076,12.263-37.899c10.681,5.328,19.729,8.256,30.318,9.811c-3.793,11.743-6.135,18.983-7.848,24.256
    c-8.925,0.165-14.717-1.71-19.405-6.278c0.339-3.941,1.839-8.575,5.024-15.524c3.623,3.469,7.33,4.668,12.418,4.019
    c-2.306,6.096-3.266,9.062-3.213,9.935c-4.409,1.354-6.782,0.586-7.949-2.572c-0.614-0.328,0-2.225,2.057-6.358
    c0.732,2.708,2.25,3.199,5.087,1.646c-1.697,3.784-2.089,4.999-1.317,4.07c-2.557,1.841-3.529,1.526-3.255-1.054"/>
</svg>

clip-path

SVG SVG
SVG
SVG
SVG 
<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" stroke = "#880e4f" stroke-width = "2" points="114.996,71.132 97.914,79.395 107.874,95.547 89.951,89.311 
        85.574,107.773 77.311,90.691 61.159,100.651 67.396,82.729 48.932,78.352 66.014,70.089 56.054,53.937 73.976,60.173 
        78.354,41.709 86.617,58.792 102.769,48.832 96.532,66.754 "/>
    </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 = "#880e4f" stroke-width = "2" d="M85.772,86.018c7.145,14.492-8.221,17.735-7.74,1.634
        c-0.48,16.102-15.594,11.834-7.614-2.15c-7.98,13.984-19.38,3.182-5.743-5.442c-13.638,8.624-18.711-6.239-2.556-7.487
        c-16.155,1.248-13.74-14.27,1.217-7.818c-14.957-6.452-5.606-19.071,4.71-6.357c-10.316-12.714,3.826-19.542,7.125-3.439
        c-3.299-16.103,12.397-15.575,7.907,0.266c4.49-15.841,18.144-8.081,6.878,3.909c11.266-11.99,19.747,1.228,4.272,6.658
        c15.475-5.431,16.847,10.215,0.69,7.882c16.156,2.333,10.096,16.822-3.053,7.298C105.016,90.495,92.917,100.51,85.772,86.018z"/>
    </clipPath>
    <image xlink:href="../../assets/img/svg-french-fries.svg" width = "160" height = "160" clip-path="url(#clip2)"/>
</svg>

Animation

/>

SVG-Text Animation1

See the Pen SVG-Text Animation1 by miki5237 (@miki5237) on CodePen.

SVG-Text Animation2

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

SVG-Text Animation3

See the Pen SVG-Text Animation3 by miki5237 (@miki5237) on CodePen.