728x90
SVG Intro
스케일러블 벡터 그래픽스(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="138.749,152.277 9.988,95.596 123.456,12.427 " fill="#f48fb1"/>
</svg>
<svg>
<polygon points="132.354,129.322 62.615,149.795 10.262,100.473
27.646,30.679 97.385,10.206 149.738,59.527" fill="#f48fb1"/>
</svg>
<svg>
<polygon points="92.287,143.922 42.229,131.335 15.731,87.039
28.317,36.98 72.613,10.483 122.672,23.069 149.169,67.365 136.583,117.425 " fill="#f48fb1"/>
</svg>
<svg>
<polygon points="82.009,10.206 102.633,51.995 148.75,58.696
115.38,91.224 123.258,137.155 82.009,115.47 40.76,137.155 48.638,91.224 15.268,58.696 61.385,51.995 " fill="#f48fb1"/>
</svg>
<svg>
<polygon points="109.544,139.624 85.012,112.496 68.572,145.171
64.67,108.803 32.165,125.575 50.386,93.858 14.229,88.324 47.611,73.373 21.614,47.643 57.409,55.169 51.501,19.073 76.034,46.202
92.474,13.526 96.376,49.895 128.88,33.121 110.66,64.837 146.816,70.373 113.434,85.322 139.432,111.056 103.637,103.528 " fill="#f48fb1"/>
</svg>
<svg>
<polygon points="93.609,86.611 135.594,124.648 89.394,91.863
110.716,144.35 83.316,94.764 79.756,151.303 76.582,94.74 48.843,144.137 70.525,91.799 24.099,124.266 66.344,86.52 10.43,95.627
64.868,79.948 10.539,63.895 66.39,73.389 24.405,35.352 70.606,68.138 49.283,15.651 76.684,65.237 80.245,8.697 83.418,65.259
111.156,15.864 89.475,68.203 135.899,35.735 93.655,73.482 149.57,64.373 95.131,80.053 149.46,96.105 " fill="#f48fb1"/>
</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/bg.png" width="160" height="160"/>
</svg>
<svg>
<image xlink:href="img/bg.png" width="160" height="160" clip-path="circle(60px at center)"/>
</svg>
<svg>
<clipPath id="clipPath1">
<polygon points="138.749,152.277 9.988,95.596 123.456,12.427 " />
</clipPath>
<image xlink:href="img/bg.png" width="160" height="160" clip-path="url(#clipPath1)"/>
</svg>
<svg>
<clipPath id="clipPath2">
<polygon points="132.354,129.322 62.615,149.795 10.262,100.473
27.646,30.679 97.385,10.206 149.738,59.527" />
</clipPath>
<image xlink:href="img/bg.png" width="160" height="160" clip-path="url(#clipPath2)"/>
</svg>
<svg>
<clipPath id="clipPath3">
<polygon points="82.009,10.206 102.633,51.995 148.75,58.696
115.38,91.224 123.258,137.155 82.009,115.47 40.76,137.155 48.638,91.224 15.268,58.696 61.385,51.995 " />
</clipPath>
<image xlink:href="img/bg.png" width="160" height="160" clip-path="url(#clipPath3)"/>
</svg>
<svg>
<clipPath id="clipPath4">
<polygon points="109.544,139.624 85.012,112.496 68.572,145.171
64.67,108.803 32.165,125.575 50.386,93.858 14.229,88.324 47.611,73.373 21.614,47.643 57.409,55.169 51.501,19.073 76.034,46.202
92.474,13.526 96.376,49.895 128.88,33.121 110.66,64.837 146.816,70.373 113.434,85.322 139.432,111.056 103.637,103.528 " />
</clipPath>
<image xlink:href="img/bg.png" width="160" height="160" clip-path="url(#clipPath4)"/>
</svg>클리핑 마스크(Clip-path)
svg
SVG
SVG
SVG
SVG
<svg>
<text fill="#f48fb1" x="7" y="110" font-family="SCoreDream" font-size="70" font-weight="900">
SVG
</text>
</svg>
<svg>
<pattern id="pattern1" patternunites="useSpaceOuUse" width="100%" height="100%">
<image xlink:href="img/bg.png" width="160" height="160" />
</pattern>
<text fill="url(#pattern1)" x="7" y="110" font-family="SCoreDream" font-size="70" font-weight="900">SVG</text>
</svg>
<div class="text-wrap">
<div class="text-clip">SVG</div>
</div>
<div class="text-wrap">
<div class="text-clip c2">SVG</div>
</div>
<div class="text-wrap">
<div class="text-clip c3">SVG</div>
</div>
<div class="text-wrap">
<div class="text-clip c4">SVG</div>
</div>
</div>애니메이션
svg
<svg>
<rect class="ani1"/>
</svg>
<svg>
<rect class="ani2"></rect>
</svg>
<svg style="background: #E3F3FD">
<path class="ani3" fill="none" stroke="#0D47A1" stroke-width="2" d="M7,154.667c0-82.358,65.152-149,145.667-149"/>
</svg>
<svg style="background: #E3F3FD">
<path class="ani4" fill="none" stroke="#0D47A1" 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 style="background: #E3F3FD">
<path class="ani5" fill="none" stroke="#0D47A1" 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 style="background: #E3F3FD">
<path class="ani6" fill="none" stroke="#0D47A1" 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>728x90
'CSS' 카테고리의 다른 글
| css intro (2) | 2022.09.08 |
|---|---|
| SVG animation (9) | 2022.09.08 |
| 두 원이 돌아가는 애니메이션 (2) | 2022.08.29 |
| 박스가 움직이는 애니메이션 (3) | 2022.08.29 |
| 요소를 숨기는 방법 (7) | 2022.08.25 |
댓글