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="#F48FB1" width="100" height="100" x="30" y="30" />
    </svg>
    <svg>
        <rect fill="#F48FB1" width="100" height="100" x="30" y="30" stroke="#880E4F" stroke-width="5" />
    </svg>
    <svg>
        <rect fill="#F48FB1" width="100" height="100" x="30" y="30" rx="20" ry="20" />
    </svg>
    <svg>
        <rect fill="#F48FB1" width="100" height="100" x="30" y="30" rx="20" ry="20" stroke="#880E4F" stroke-width="5" />
    </svg>
    <svg>
        <rect fill="#F48FB1" width="100" height="100" x="30" y="30" rx="40" ry="40" />
    </svg>
    <svg>
        <rect fill="#F48FB1" 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="#F48FB1" r="60" cx="80" cy="80" />
    </svg>
    <svg>
        <circle fill="#F48FB1" r="60" cx="80" cy="80" stroke="#880E4F" stroke-width="5" />
    </svg>
    <svg>
        <ellipse fill="#F48FB1" rx="60" ry="40" cx="80" cy="80" />
    </svg>
    <svg>
        <ellipse fill="#F48FB1" rx="60" ry="40" cx="80" cy="80" stroke="#880E4F" stroke-width="5" />
    </svg>
    <svg>
        <ellipse fill="#F48FB1" rx="40" ry="60" cx="80" cy="80" />
    </svg>
    <svg>
        <ellipse fill="#F48FB1" 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="#f48fb1" />
</svg>
<svg>
    <polygon fill="#F48FB1" stroke="#F48FB1" stroke-miterlimit="10"
        points="-159.47,87.988 -49.907,21.748 -47.32,149.752 " />
    <polygon fill="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" stroke-miterlimit="10"
        points="-334.22,87.988 -224.657,21.748 -222.07,149.752 " />
    <polygon fill="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" stroke-miterlimit="10" points="-528.22,87.988 -418.657,21.748 -416.07,149.752 "/>
    <polygon fill="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" stroke-miterlimit="10" points="-732.97,87.988 -623.407,21.748 -620.82,149.752 "/>
    <polygon fill="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" stroke-miterlimit="10" points="-940.97,87.988 -831.407,21.748 -828.82,149.752 "/>
    <polygon fill="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#f48fb1" />
    </clipPath >

    <image xlink:href="img/Frame 4.jpg" width="160" height="160" clip-path="url(#clipPath1)">
</svg>
<svg>
    <clipPath id="clipPath2">
        <polygon fill="#F48FB1" stroke="#F48FB1" stroke-miterlimit="10"
            points="-159.47,87.988 -49.907,21.748 -47.32,149.752 " />
        <polygon fill="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" stroke-miterlimit="10"
            points="-334.22,87.988 -224.657,21.748 -222.07,149.752 " />
        <polygon fill="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" stroke-miterlimit="10" points="-528.22,87.988 -418.657,21.748 -416.07,149.752 "/>
        <polygon fill="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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="#F48FB1" stroke="#F48FB1" 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
SVG
SVG
<!-- css로 클리핑 마스크 하는 법  -->
.svg7 {display: flex;}
.text-wrap {
    background-color: #e3f3fd;
    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;}
}