SVG
스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다.
- 인터넷 익스플로러9 버전 이상부터 지원됩니다.
- XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다.
- 벡터 방식이기 때문에 확대하거나 축소가 가능합니다.
- DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다.
사각형(rect)
svg
<div class="svgBox svg1">
<svg>
<rect fill="#444" width="100" height="100" x="30" y="30" />
</svg>
<svg>
<rect fill="#444" width="100" height="100" x="30" y="30" stroke="#880E4F" stroke-width="5" />
</svg>
<svg>
<rect fill="#444" width="100" height="100" x="30" y="30" rx="20" ry="20" />
</svg>
<svg>
<rect fill="#444" width="100" height="100" x="30" y="30" rx="20" ry="20" stroke="#880E4F" stroke-width="5" />
</svg>
<svg>
<rect fill="#444" width="100" height="100" x="30" y="30" rx="40" ry="40" />
</svg>
<svg>
<rect fill="#444" width="100" height="100" x="30" y="30" rx="60" ry="60" stroke="#880E4F" stroke-width="5" />
</svg>
</div>
원형(circle, ellipse)
svg
<div class="svgBox svg1">
<svg>
<circle fill="#444" r="60" cx="80" cy="80" />
</svg>
<svg>
<circle fill="#444" r="60" cx="80" cy="80" stroke="#880E4F" stroke-width="5" />
</svg>
<svg>
<ellipse fill="#444" rx="60" ry="40" cx="80" cy="80" />
</svg>
<svg>
<ellipse fill="#444" rx="60" ry="40" cx="80" cy="80" stroke="#880E4F" stroke-width="5" />
</svg>
<svg>
<ellipse fill="#444" rx="40" ry="60" cx="80" cy="80" />
</svg>
<svg>
<ellipse fill="#444" rx="40" ry="60" cx="80" cy="80" stroke="#880E4F" stroke-width="5" />
</svg>
</div>
다각형(polygon)
svg
<svg>
<polygon points="15.984,133.383 80,22.505 144.016,133.383" fill="#444" />
</svg>
<svg>
<polygon fill="#444" stroke="#444" stroke-miterlimit="10"
points="-159.47,87.988 -49.907,21.748 -47.32,149.752 " />
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="116.75,128.5 54.641,135.076 17.891,84.576 43.25,27.5
105.359,20.924 142.109,71.424 " />
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="296,130.75 245.729,143.14 204.697,111.562
203.805,59.793 243.722,26.818 294.391,37.467 317.657,83.721 " />
<polygon fill="#444" stroke="#444" stroke-miterlimit="10"
points="498.25,125.076 457.178,113.504 424.36,140.777
422.675,98.139 386.595,75.355 426.625,60.576 437.145,19.222 463.57,52.726 506.151,49.951 482.453,85.437 " />
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="698.5,114 672.474,97.879 678.433,127.908
661.214,102.596 654.443,132.452 649.009,102.324 630.681,126.846 637.97,97.111 611.252,112.059 630.005,87.859 599.518,90.647
626.491,76.168 597.506,66.315 628.037,64.059 605.565,43.268 634.375,53.625 622.303,25.491 644.408,46.671 644.823,16.059
656.403,44.399 669.232,16.603 668.285,47.202 691.311,27.027 677.999,54.596 707.24,45.53 683.866,65.301 714.267,68.913
684.872,77.468 711.175,93.133 680.842,88.991 " />
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="876.75,93.25 893.855,128.341 871.34,96.45
873.714,135.416 865.116,97.337 852.398,134.245 859.027,95.773 833.153,125.006 854,92 818.909,109.105 850.8,86.59
811.834,88.964 849.913,80.366 813.005,67.648 851.477,74.277 822.244,48.403 855.25,69.25 838.145,34.159 860.66,66.05
858.286,27.084 866.884,65.163 879.602,28.255 872.973,66.726 898.847,37.494 878,70.5 913.091,53.395 881.2,75.91 920.166,73.536
882.087,82.134 918.995,94.852 880.523,88.223 909.756,114.097 " />/>
</svg>
<svg>
<polygon fill="#444" stroke="#444" stroke-miterlimit="10"
points="-334.22,87.988 -224.657,21.748 -222.07,149.752 " />
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="-58,128.5 -120.109,135.076 -156.859,84.576 -131.5,27.5
-69.391,20.924 -32.641,71.424 " />
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="121.25,130.75 70.979,143.14 29.947,111.562
29.055,59.793 68.972,26.818 119.641,37.467 142.907,83.721 " />
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="323.5,125.076 282.428,113.504 249.61,140.777
247.925,98.139 211.845,75.355 251.875,60.576 262.395,19.222 288.82,52.726 331.401,49.951 307.703,85.437 " />
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="523.75,114 497.724,97.879 503.683,127.908
486.464,102.596 479.693,132.452 474.259,102.324 455.931,126.846 463.22,97.111 436.502,112.059 455.255,87.859 424.768,90.647
451.741,76.168 422.756,66.315 453.287,64.059 430.815,43.268 459.625,53.625 447.553,25.491 469.658,46.671 470.073,16.059
481.653,44.399 494.482,16.603 493.535,47.202 516.561,27.027 503.249,54.596 532.49,45.53 509.116,65.301 539.517,68.913
510.122,77.468 536.425,93.133 506.092,88.991 " />
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="702,93.25 719.105,128.341 696.59,96.45 698.964,135.416
690.366,97.337 677.648,134.245 684.277,95.773 658.403,125.006 679.25,92 644.159,109.105 676.05,86.59 637.084,88.964
675.163,80.366 638.255,67.648 676.727,74.277 647.494,48.403 680.5,69.25 663.395,34.159 685.91,66.05 683.536,27.084
692.134,65.163 704.852,28.255 698.223,66.726 724.097,37.494 703.25,70.5 738.341,53.395 706.45,75.91 745.416,73.536
707.337,82.134 744.245,94.852 705.773,88.223 735.006,114.097 " />
</svg>
<svg>
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="-528.22,87.988 -418.657,21.748 -416.07,149.752 "/>
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="-252,128.5 -314.109,135.076 -350.859,84.576 -325.5,27.5
-263.391,20.924 -226.641,71.424 "/>
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="-72.75,130.75 -123.021,143.14 -164.053,111.562
-164.945,59.793 -125.028,26.818 -74.359,37.467 -51.093,83.721 "/>
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="129.5,125.076 88.428,113.504 55.61,140.777
53.925,98.139 17.845,75.355 57.875,60.576 68.395,19.222 94.82,52.726 137.401,49.951 113.703,85.437 "/>
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="329.75,114 303.724,97.879 309.683,127.908
292.464,102.596 285.693,132.452 280.259,102.324 261.931,126.846 269.22,97.111 242.502,112.059 261.255,87.859 230.768,90.647
257.741,76.168 228.756,66.315 259.287,64.059 236.815,43.268 265.625,53.625 253.553,25.491 275.658,46.671 276.073,16.059
287.653,44.399 300.482,16.603 299.535,47.202 322.561,27.027 309.249,54.596 338.49,45.53 315.116,65.301 345.517,68.913
316.122,77.468 342.425,93.133 312.092,88.991 "/>
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="508,93.25 525.105,128.341 502.59,96.45 504.964,135.416
496.366,97.337 483.648,134.245 490.277,95.773 464.403,125.006 485.25,92 450.159,109.105 482.05,86.59 443.084,88.964
481.163,80.366 444.255,67.648 482.727,74.277 453.494,48.403 486.5,69.25 469.395,34.159 491.91,66.05 489.536,27.084
498.134,65.163 510.852,28.255 504.223,66.726 530.097,37.494 509.25,70.5 544.341,53.395 512.45,75.91 551.416,73.536
513.337,82.134 550.245,94.852 511.773,88.223 541.006,114.097 "/>
</svg>
<svg>
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="-732.97,87.988 -623.407,21.748 -620.82,149.752 "/>
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="-456.75,128.5 -518.859,135.076 -555.609,84.576
-530.25,27.5 -468.141,20.924 -431.391,71.424 "/>
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="-277.5,130.75 -327.771,143.14 -368.803,111.562
-369.695,59.793 -329.778,26.818 -279.109,37.467 -255.843,83.721 "/>
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="-75.25,125.076 -116.322,113.504 -149.14,140.777
-150.825,98.139 -186.905,75.355 -146.875,60.576 -136.355,19.222 -109.93,52.726 -67.349,49.951 -91.047,85.437 "/>
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="125,114 98.974,97.879 104.933,127.908 87.714,102.596
80.943,132.452 75.509,102.324 57.181,126.846 64.47,97.111 37.752,112.059 56.505,87.859 26.018,90.647 52.991,76.168
24.006,66.315 54.537,64.059 32.065,43.268 60.875,53.625 48.803,25.491 70.908,46.671 71.323,16.059 82.903,44.399 95.732,16.603
94.785,47.202 117.811,27.027 104.499,54.596 133.74,45.53 110.366,65.301 140.767,68.913 111.372,77.468 137.675,93.133
107.342,88.991 "/>
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="303.25,93.25 320.355,128.341 297.84,96.45
300.214,135.416 291.616,97.337 278.898,134.245 285.527,95.773 259.653,125.006 280.5,92 245.409,109.105 277.3,86.59
238.334,88.964 276.413,80.366 239.505,67.648 277.977,74.277 248.744,48.403 281.75,69.25 264.645,34.159 287.16,66.05
284.786,27.084 293.384,65.163 306.102,28.255 299.473,66.726 325.347,37.494 304.5,70.5 339.591,53.395 307.7,75.91
346.666,73.536 308.587,82.134 345.495,94.852 307.023,88.223 336.256,114.097 "/>
</svg>
<svg>
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="-940.97,87.988 -831.407,21.748 -828.82,149.752 "/>
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="-664.75,128.5 -726.859,135.076 -763.609,84.576
-738.25,27.5 -676.141,20.924 -639.391,71.424 "/>
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="-485.5,130.75 -535.771,143.14 -576.803,111.562
-577.695,59.793 -537.778,26.818 -487.109,37.467 -463.843,83.721 "/>
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="-283.25,125.076 -324.322,113.504 -357.14,140.777
-358.825,98.139 -394.905,75.355 -354.875,60.576 -344.355,19.222 -317.93,52.726 -275.349,49.951 -299.047,85.437 "/>
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="-83,114 -109.026,97.879 -103.067,127.908
-120.286,102.596 -127.057,132.452 -132.491,102.324 -150.819,126.846 -143.53,97.111 -170.248,112.059 -151.495,87.859
-181.982,90.647 -155.009,76.168 -183.994,66.315 -153.463,64.059 -175.935,43.268 -147.125,53.625 -159.197,25.491
-137.092,46.671 -136.677,16.059 -125.097,44.399 -112.268,16.603 -113.215,47.202 -90.189,27.027 -103.501,54.596 -74.26,45.53
-97.634,65.301 -67.233,68.913 -96.628,77.468 -70.325,93.133 -100.658,88.991 "/>
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="95.25,93.25 112.355,128.341 89.84,96.45 92.214,135.416
83.616,97.337 70.898,134.245 77.527,95.773 51.653,125.006 72.5,92 37.409,109.105 69.3,86.59 30.334,88.964 68.413,80.366
31.505,67.648 69.977,74.277 40.744,48.403 73.75,69.25 56.645,34.159 79.16,66.05 76.786,27.084 85.384,65.163 98.102,28.255
91.473,66.726 117.347,37.494 96.5,70.5 131.591,53.395 99.7,75.91 138.666,73.536 100.587,82.134 137.495,94.852 99.023,88.223
128.256,114.097 "/>
</svg>
패스(path)
svg
<div class="svgBox svg3">
<svg class="svg">
<path fill="none" stroke="#880E4F" stroke-width="2" d="M7,154.667c0-82.358,65.152-149,145.667-149"/>
</svg>
<svg class="svg">
<path fill="none" stroke="#880E4F" stroke-width="2" d="M151.534,123.547c-33.711,33.711-88.369,33.711-122.08,0
c-26.97-26.969-26.97-70.695,0-97.665c21.575-21.576,56.556-21.576,78.131,0c17.261,17.26,17.261,45.245,0.001,62.504
c-13.809,13.809-36.196,13.809-50.005,0c-11.046-11.046-11.046-28.956,0-40.002c8.837-8.837,23.166-8.837,32.003,0
c7.069,7.07,7.07,18.532,0,25.602c-5.656,5.657-14.826,5.657-20.482,0c-4.524-4.524-4.524-11.86,0-16.385"/>
</svg>
<svg class="svg">
<path fill="none" stroke="#880E4F" stroke-width="2" d="M82.671,81.243c50.565,48.259,14.182,69.191-2.135,1.229
c16.316,67.962-25.611,65.895-2.46-0.122c-23.151,66.017-57.304,41.617-2.004-1.432c-55.3,43.049-70.84,4.057-0.912-2.288
c-69.929,6.345-61.919-34.86,0.47-2.417c-62.389-32.442-33.374-62.777,1.703-1.78c-35.076-60.997,5.73-70.826,2.395-0.577
c3.335-70.249,42.981-56.458,2.326,0.81c40.655-57.268,66.554-24.232,1.521,1.938c65.033-26.17,68.953,15.62,0.23,2.452
C152.526,92.225,133.236,129.502,82.671,81.243z"/>
</svg>
<svg class="svg">
<path fill="none" stroke="#880E4F" stroke-width="2" d="M131.502,129.683c-44.4-42.871-49.621-39.867-34.943,20.102
c-14.678-59.969-20.694-60.265-40.261-1.983c19.566-58.281,14.666-61.783-32.799-23.436C70.963,86.018,68.733,80.421,8.573,86.918
c60.16-6.497,61.31-12.409,7.692-39.569c53.617,27.16,57.781,22.808,27.864-29.131c29.917,51.938,35.772,50.527,39.189-9.441
c-3.417,59.969,2.272,61.948,38.075,13.245c-35.803,48.703-32.086,53.443,24.869,31.726C89.308,75.465,89.87,81.462,150.03,93.884
C89.87,81.462,87.102,86.812,131.502,129.683z"/>
</svg>
<svg class="svg">
<path fill="none" stroke="#880E4F" stroke-width="2" d="M58.665,139.312c0-6.873,42-6.873,42-13.747s-42-6.874-42-13.748
s42-6.874,42-13.748c0-6.872-42-6.872-42-13.744c0-6.874,42-6.874,42-13.747c0-6.877-42-6.877-42-13.753
c0-6.874,42-6.874,42-13.748c0-6.878-42-6.878-42-13.757s42-6.879,42-13.758"/>
</svg>
<svg class="svg">
<path fill="none" stroke="#880E4F" stroke-width="2" d="M93.108,91.478c42.049,30.58-13.048,57.425-13.347,6.503
c0.299,50.922-55.041,24.58-13.405-6.381c-41.636,30.961-55.545-28.728-3.37-14.458c-52.176-14.27-14.181-62.359,9.204-11.649
c-23.385-50.71,37.901-50.989,14.846-0.067c23.055-50.922,61.484-3.179,9.309,11.565C148.521,62.245,135.157,122.058,93.108,91.478
z"/>
</svg>
</div>
라인(line, polyline)
svg
<div class="svgBox svg3">
<svg>
<line x1="0" y1="0" x2="200" y2="200" stroke="#0D47A1" stroke-width="2" fill="none" />
</svg>
<svg>
<line x1="50" y1="50" x2="200" y2="200" stroke="#0D47A1" stroke-width="2" fill="none" />
</svg>
<svg>
<line x1="100" y1="100" x2="200" y2="200" stroke="#0D47A1" stroke-width="2" fill="none" />
</svg>
<svg>
<polyline points="21,17.2 21,139.2 117,52.2" stroke="#0D47A1" stroke-width="2" fill="none" />
</svg>
<svg>
<polyline points="21,17.2 21,139.2 122,28.2 141,139.2" stroke="#0D47A1" stroke-width="2" fill="none" />
</svg>
<svg>
<polyline points="21,17.2 21,139.2 122,28.2 141,139.2 23.5,11.7" stroke="#0D47A1" stroke-width="2" fill="none" />
</svg>
</div>
클리핑 마스크(Clip-path)
svg
<svg>
<image xlink:href="img/Frame 4.jpg" width="160" height="160">
</svg>
<svg>
<image xlink:href="img/Frame 4.jpg" width="160" height="160" clip-path="circle(60px at center)">
</svg>
<svg>
<clipPath id="clipPath1">
<polygon points="15.984,133.383 80,22.505 144.016,133.383" fill="#444" />
</clipPath >
<image xlink:href="img/Frame 4.jpg" width="160" height="160" clip-path="url(#clipPath1)">
</svg>
<svg>
<clipPath id="clipPath2">
<polygon fill="#444" stroke="#444" stroke-miterlimit="10"
points="-159.47,87.988 -49.907,21.748 -47.32,149.752 " />
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="116.75,128.5 54.641,135.076 17.891,84.576 43.25,27.5
105.359,20.924 142.109,71.424 " />
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="296,130.75 245.729,143.14 204.697,111.562
203.805,59.793 243.722,26.818 294.391,37.467 317.657,83.721 " />
<polygon fill="#444" stroke="#444" stroke-miterlimit="10"
points="498.25,125.076 457.178,113.504 424.36,140.777
422.675,98.139 386.595,75.355 426.625,60.576 437.145,19.222 463.57,52.726 506.151,49.951 482.453,85.437 " />
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="698.5,114 672.474,97.879 678.433,127.908
661.214,102.596 654.443,132.452 649.009,102.324 630.681,126.846 637.97,97.111 611.252,112.059 630.005,87.859 599.518,90.647
626.491,76.168 597.506,66.315 628.037,64.059 605.565,43.268 634.375,53.625 622.303,25.491 644.408,46.671 644.823,16.059
656.403,44.399 669.232,16.603 668.285,47.202 691.311,27.027 677.999,54.596 707.24,45.53 683.866,65.301 714.267,68.913
684.872,77.468 711.175,93.133 680.842,88.991 " />
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="876.75,93.25 893.855,128.341 871.34,96.45
873.714,135.416 865.116,97.337 852.398,134.245 859.027,95.773 833.153,125.006 854,92 818.909,109.105 850.8,86.59
811.834,88.964 849.913,80.366 813.005,67.648 851.477,74.277 822.244,48.403 855.25,69.25 838.145,34.159 860.66,66.05
858.286,27.084 866.884,65.163 879.602,28.255 872.973,66.726 898.847,37.494 878,70.5 913.091,53.395 881.2,75.91 920.166,73.536
882.087,82.134 918.995,94.852 880.523,88.223 909.756,114.097 " />
</clipPath >
<image xlink:href="img/Frame 4.jpg" width="160" height="160" clip-path="url(#clipPath2)">
</svg>
<svg>
<clipPath id="clipPath3">
<polygon fill="#444" stroke="#444" stroke-miterlimit="10"
points="-334.22,87.988 -224.657,21.748 -222.07,149.752 " />
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="-58,128.5 -120.109,135.076 -156.859,84.576 -131.5,27.5
-69.391,20.924 -32.641,71.424 " />
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="121.25,130.75 70.979,143.14 29.947,111.562
29.055,59.793 68.972,26.818 119.641,37.467 142.907,83.721 " />
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="323.5,125.076 282.428,113.504 249.61,140.777
247.925,98.139 211.845,75.355 251.875,60.576 262.395,19.222 288.82,52.726 331.401,49.951 307.703,85.437 " />
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="523.75,114 497.724,97.879 503.683,127.908
486.464,102.596 479.693,132.452 474.259,102.324 455.931,126.846 463.22,97.111 436.502,112.059 455.255,87.859 424.768,90.647
451.741,76.168 422.756,66.315 453.287,64.059 430.815,43.268 459.625,53.625 447.553,25.491 469.658,46.671 470.073,16.059
481.653,44.399 494.482,16.603 493.535,47.202 516.561,27.027 503.249,54.596 532.49,45.53 509.116,65.301 539.517,68.913
510.122,77.468 536.425,93.133 506.092,88.991 " />
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="702,93.25 719.105,128.341 696.59,96.45 698.964,135.416
690.366,97.337 677.648,134.245 684.277,95.773 658.403,125.006 679.25,92 644.159,109.105 676.05,86.59 637.084,88.964
675.163,80.366 638.255,67.648 676.727,74.277 647.494,48.403 680.5,69.25 663.395,34.159 685.91,66.05 683.536,27.084
692.134,65.163 704.852,28.255 698.223,66.726 724.097,37.494 703.25,70.5 738.341,53.395 706.45,75.91 745.416,73.536
707.337,82.134 744.245,94.852 705.773,88.223 735.006,114.097 " />
</clipPath >
<image xlink:href="img/Frame 4.jpg" width="160" height="160" clip-path="url(#clipPath3)">
</svg>
<svg>
<clipPath id="clipPath4">
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="-528.22,87.988 -418.657,21.748 -416.07,149.752 "/>
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="-252,128.5 -314.109,135.076 -350.859,84.576 -325.5,27.5
-263.391,20.924 -226.641,71.424 "/>
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="-72.75,130.75 -123.021,143.14 -164.053,111.562
-164.945,59.793 -125.028,26.818 -74.359,37.467 -51.093,83.721 "/>
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="129.5,125.076 88.428,113.504 55.61,140.777
53.925,98.139 17.845,75.355 57.875,60.576 68.395,19.222 94.82,52.726 137.401,49.951 113.703,85.437 "/>
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="329.75,114 303.724,97.879 309.683,127.908
292.464,102.596 285.693,132.452 280.259,102.324 261.931,126.846 269.22,97.111 242.502,112.059 261.255,87.859 230.768,90.647
257.741,76.168 228.756,66.315 259.287,64.059 236.815,43.268 265.625,53.625 253.553,25.491 275.658,46.671 276.073,16.059
287.653,44.399 300.482,16.603 299.535,47.202 322.561,27.027 309.249,54.596 338.49,45.53 315.116,65.301 345.517,68.913
316.122,77.468 342.425,93.133 312.092,88.991 "/>
<polygon fill="#444" stroke="#444" stroke-miterlimit="10" points="508,93.25 525.105,128.341 502.59,96.45 504.964,135.416
496.366,97.337 483.648,134.245 490.277,95.773 464.403,125.006 485.25,92 450.159,109.105 482.05,86.59 443.084,88.964
481.163,80.366 444.255,67.648 482.727,74.277 453.494,48.403 486.5,69.25 469.395,34.159 491.91,66.05 489.536,27.084
498.134,65.163 510.852,28.255 504.223,66.726 530.097,37.494 509.25,70.5 544.341,53.395 512.45,75.91 551.416,73.536
513.337,82.134 550.245,94.852 511.773,88.223 541.006,114.097 "/>
</clipPath >
<image xlink:href="img/Frame 4.jpg" width="160" height="160" clip-path="url(#clipPath4)">
</svg>
클리핑 마스크(Clip-path)
svg
SVG
SVG
SVG
SVG
<!-- css로 클리핑 마스크 하는 법 -->
.svg7 {display: flex;}
.text-wrap {
background-color: #f5f5f5;
width: 160px;
height: 160px;
margin: 6px;
display: inline-block;
overflow: hidden;
}
.text-clip {
font-size: 70px;
text-align: center;
font-family: 'SCoreDream';
text-transform: uppercase;
line-height: 170px;
-webkit-text-fill-color: #0d47a1;
}
.text-clip.c2 {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-image: url(img/Frame4.jpg);
background-size: 100%;
}
.text-clip.c3 {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-image: linear-gradient(60deg, #ff5858, #f09819);
}
.text-clip.c4 {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-stroke: 2px #d147a1;
}
애니메이션
svg
.ani1 {
width: 100px;
height: 100px;
x: 30px;
y: 30px;
fill: none;
stroke: #880e41;
stroke-width: 2px;
stroke-dasharray: 50;
stroke-dashoffset: 50;
animation: ani1 1s infinite linear alternate-reverse;
}
@keyframes ani1 {
0% {stroke-dashoffset: 0;}
100% {stroke-dashoffset: 100;}
}
.ani1 {
width: 100px; height: 100px;
x: 30px; y: 30px;
fill: none;
stroke: #880E41;
stroke-width: 2px;
stroke-dasharray: 50;
stroke-dashoffset: 50;
animation: ani1 1s infinite linear alternate-reverse;
}
@keyframes ani1 {
0% {stroke-dashoffset: 50;}
100% {stroke-dashoffset: 0;}
}
.ani2 {
width: 100px; height: 100px;
x: 30px; y: 30px;
fill: none;
stroke: #880E41;
stroke-width: 2px;
stroke-dasharray: 400;
stroke-dashoffset: 400;
animation: ani2 2s infinite linear alternate-reverse;
}
@keyframes ani2 {
0% {stroke-dashoffset: 400;}
100% {stroke-dashoffset: 0;}
}
.ani3 {
animation: ani3 1s infinite linear alternate-reverse;
stroke-dasharray: 230px;
stroke-dashoffset: 230px;
}
@keyframes ani3 {
0% {stroke-dashoffset: 230px;}
100% {stroke-dashoffset: 0;}
}
.ani4 {
animation: ani4 1s infinite linear alternate-reverse;
stroke-dasharray: 605px;
stroke-dashoffset: 605px;
}
@keyframes ani4 {
0% {stroke-dashoffset: 605px;}
100% {stroke-dashoffset: 0;}
}
.ani5 {
animation: ani5 1s infinite linear alternate-reverse;
stroke-dasharray: 411px;
stroke-dashoffset: 411px;
}
@keyframes ani5 {
0% {stroke-dashoffset: 411px;}
100% {stroke-dashoffset: 0;}
}
.ani6 {
animation: ani6 1s infinite linear alternate-reverse;
stroke-dasharray: 614px;
stroke-dashoffset: 614px;
}
@keyframes ani6 {
0% {stroke-dashoffset: 614px;}
100% {stroke-dashoffset: 0;}
}