코드랩 레퍼런스
SVG 본문
스케이러블 벡터 그래픽스(Scalable Vector Graphic, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML기반의 파일 형식으로, 1999년 W3C의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다.
Sample1 사각형과 보더값을 적용한 SVG입니다.
<rect x="30" y="30" width="140" height="140" stroke="#880e4f" stroke-width="0" fill="#f48fb1" />
<rect x="30" y="30" width="140" height="140" stroke="#880e4f" stroke-width="5" fill="#f48fb1" />
<rect x="30" y="30" width="140" height="140" stroke="#880e4f" stroke-width="10" fill="#f48fb1" />
<rect x="30" y="30" width="140" height="140" stroke="#880e4f" stroke-width="15" fill="#f48fb1" />
<rect x="30" y="30" width="140" height="140" stroke="#880e4f" stroke-width="5" fill="#f48fb1" />
<rect x="30" y="30" width="140" height="140" stroke="#880e4f" stroke-width="10" fill="#f48fb1" />
<rect x="30" y="30" width="140" height="140" stroke="#880e4f" stroke-width="15" fill="#f48fb1" />
Sample2 사각형에 보더 레디우스를 적용한 SVG입니다.
<rect x="30" y="30" rx="5" ry="5" width="140" height="140" stroke="#880e4f" stroke-width="0" fill="#f48fb1" />
<rect x="30" y="30" rx="20" ry="20" width="140" height="140" stroke="#880e4f" stroke-width="5" fill="#f48fb1" />
<rect x="30" y="30" rx="40" ry="40" width="140" height="140" stroke="#880e4f" stroke-width="5" fill="#f48fb1" />
<rect x="30" y="30" rx="70" ry="70" width="140" height="140" stroke="#880e4f" stroke-width="5" fill="#f48fb1" />
<rect x="30" y="30" rx="20" ry="20" width="140" height="140" stroke="#880e4f" stroke-width="5" fill="#f48fb1" />
<rect x="30" y="30" rx="40" ry="40" width="140" height="140" stroke="#880e4f" stroke-width="5" fill="#f48fb1" />
<rect x="30" y="30" rx="70" ry="70" width="140" height="140" stroke="#880e4f" stroke-width="5" fill="#f48fb1" />
Sample3 원형 SVG입니다.
<circle cx="100" cy="100" r="80" stroke="#880e4f" stroke-width="0" fill="#f48fb1" />
<circle cx="100" cy="100" r="80" stroke="#880e4f" stroke-width="5" fill="#f48fb1" />
<circle cx="100" cy="100" r="80" stroke="#880e4f" stroke-width="10" fill="#f48fb1" />
<circle cx="100" cy="100" r="80" stroke="#880e4f" stroke-width="15" fill="#f48fb1" />
<circle cx="100" cy="100" r="80" stroke="#880e4f" stroke-width="5" fill="#f48fb1" />
<circle cx="100" cy="100" r="80" stroke="#880e4f" stroke-width="10" fill="#f48fb1" />
<circle cx="100" cy="100" r="80" stroke="#880e4f" stroke-width="15" fill="#f48fb1" />
Sample4 타원형 SVG입니다.
<ellipse cx="100" cy="100" rx="90" ry="80" stroke="#880e4f" stroke-width="0" fill="#f48fb1" />
<ellipse cx="100" cy="100" rx="90" ry="60" stroke="#880e4f" stroke-width="0" fill="#f48fb1" />
<ellipse cx="100" cy="100" rx="90" ry="40" stroke="#880e4f" stroke-width="0" fill="#f48fb1" />
<ellipse cx="100" cy="100" rx="90" ry="20" stroke="#880e4f" stroke-width="0" fill="#f48fb1" />
<ellipse cx="100" cy="100" rx="80" ry="90" stroke="#880e4f" stroke-width="0" fill="#f48fb1" />
<ellipse cx="100" cy="100" rx="60" ry="90" stroke="#880e4f" stroke-width="0" fill="#f48fb1" />
<ellipse cx="100" cy="100" rx="40" ry="90" stroke="#880e4f" stroke-width="0" fill="#f48fb1" />
<ellipse cx="100" cy="100" rx="20" ry="90" stroke="#880e4f" stroke-width="0" fill="#f48fb1" />
<ellipse cx="100" cy="100" rx="90" ry="60" stroke="#880e4f" stroke-width="0" fill="#f48fb1" />
<ellipse cx="100" cy="100" rx="90" ry="40" stroke="#880e4f" stroke-width="0" fill="#f48fb1" />
<ellipse cx="100" cy="100" rx="90" ry="20" stroke="#880e4f" stroke-width="0" fill="#f48fb1" />
<ellipse cx="100" cy="100" rx="80" ry="90" stroke="#880e4f" stroke-width="0" fill="#f48fb1" />
<ellipse cx="100" cy="100" rx="60" ry="90" stroke="#880e4f" stroke-width="0" fill="#f48fb1" />
<ellipse cx="100" cy="100" rx="40" ry="90" stroke="#880e4f" stroke-width="0" fill="#f48fb1" />
<ellipse cx="100" cy="100" rx="20" ry="90" stroke="#880e4f" stroke-width="0" fill="#f48fb1" />
Sample5 폴리건 SVG입니다.
<polygon points="183,183 17,146 127,12 " stroke="#e65100" stroke-width="1" fill="#ffe0b2" />
<polygon points="163.841,172.419 54.005,184.796 8.292,84.16 89.877,9.586 186.012,64.133" stroke="#e65100" stroke-width="1" fill="#ffe0b2" />
<polygon points="165.848,156.965 80.722,183.719 14.99,123.374 34.384,36.276 119.51,9.523 185.242,69.867" stroke="#e65100" stroke-width="1" fill="#ffe0b2" />
<polygon points="152.94,169.666 76.351,185.678 16.08,135.782 17.512,57.55 79.569,9.893 155.521,28.698 188.174,99.803" stroke="#e65100" stroke-width="1" fill="#ffe0b2"" />
<polygon points="159.643,176.498 104.003,150.94 51.407,182.286 58.52,121.472 12.455,81.136 72.491,69.108 96.618,12.834 126.609,66.214 187.585,71.77 146.085,116.789" stroke="#e65100" stroke-width="1" fill="#ffe0b2" />
<polygon points="170.144,152.495 118.573,139.368 90.476,184.561 76.059,133.335 22.872,131.599 60.026,93.501 34.936,46.572 86.507,59.7 114.604,14.506 129.021,65.732 182.208,67.468 145.054,105.566" stroke="#e65100" stroke-width="1" fill="#ffe0b2" />
<polygon points="162.188,146.151 126.661,125.96 143.815,163.049 116.266,132.868 121.119,173.443 104.244,136.226 96.322,176.314 91.774,135.704 71.851,171.382 80.075,131.354 50.102,159.129 70.293,123.602 33.204,140.756 63.385,113.207 22.811,118.06 60.028,101.186 19.939,93.263 60.549,88.715 24.871,68.792 64.899,77.016 37.124,47.043 72.651,67.234 55.497,30.145 83.046,60.326 78.193,19.752 95.067,56.969 102.99,16.881 107.538,57.49 127.461,21.813 119.237,61.84 149.21,34.065 129.019,69.592 166.108,52.439 135.927,79.987 176.501,75.135 139.284,92.009 179.372,99.932 138.763,104.479 174.441,124.402 134.413,116.178" stroke="#e65100" stroke-width="1" fill="#ffe0b2" />
<polygon points="161.328,155.626 127.658,128.644 152.388,164.001 122.901,132.502 142.347,171.018 117.643,135.643 131.41,176.536 111.991,138.005 119.798,180.44 106.061,139.538 107.75,182.652 99.973,140.212 95.509,183.127 93.851,140.012 83.325,181.855 87.82,138.943 71.446,178.863 82.003,137.027 60.114,174.21 76.517,134.302 49.559,167.991 71.475,130.824 39.997,160.334 66.979,126.664 31.622,151.394 63.121,121.907 24.604,141.353 59.979,116.649 19.087,130.416 57.618,110.997 15.183,118.805 56.085,105.067 12.971,106.756 55.411,98.979 12.496,94.515 55.611,92.857 13.767,82.331 56.68,86.826 16.76,70.452 58.596,81.009 21.413,59.12 61.321,75.523 27.632,48.565 64.799,70.481 35.289,39.003 68.959,65.985 44.229,30.628 73.716,62.127 54.27,23.611 78.974,58.986 65.207,18.093 84.626,56.624 76.818,14.189 90.556,55.091 88.867,11.977 96.644,54.418 101.108,11.502 102.766,54.617 113.292,12.774 108.797,55.686 125.171,15.767 114.614,57.603 136.503,20.419 120.1,60.327 147.058,26.638 125.142,63.805 156.62,34.295 129.638,67.965 164.995,43.235 133.496,72.722 172.012,53.276 136.637,77.98 177.53,64.213 138.999,83.632 181.434,75.825 140.532,89.562 183.646,87.873 141.205,95.65 184.121,100.114 141.006,101.772 182.849,112.298 139.937,107.803 179.856,124.177 138.02,113.62 175.203,135.509 135.296,119.106 168.985,146.064 131.818,124.148" stroke="#e65100" stroke-width="1" fill="#ffe0b2" />
<polygon points="163.841,172.419 54.005,184.796 8.292,84.16 89.877,9.586 186.012,64.133" stroke="#e65100" stroke-width="1" fill="#ffe0b2" />
<polygon points="165.848,156.965 80.722,183.719 14.99,123.374 34.384,36.276 119.51,9.523 185.242,69.867" stroke="#e65100" stroke-width="1" fill="#ffe0b2" />
<polygon points="152.94,169.666 76.351,185.678 16.08,135.782 17.512,57.55 79.569,9.893 155.521,28.698 188.174,99.803" stroke="#e65100" stroke-width="1" fill="#ffe0b2"" />
<polygon points="159.643,176.498 104.003,150.94 51.407,182.286 58.52,121.472 12.455,81.136 72.491,69.108 96.618,12.834 126.609,66.214 187.585,71.77 146.085,116.789" stroke="#e65100" stroke-width="1" fill="#ffe0b2" />
<polygon points="170.144,152.495 118.573,139.368 90.476,184.561 76.059,133.335 22.872,131.599 60.026,93.501 34.936,46.572 86.507,59.7 114.604,14.506 129.021,65.732 182.208,67.468 145.054,105.566" stroke="#e65100" stroke-width="1" fill="#ffe0b2" />
<polygon points="162.188,146.151 126.661,125.96 143.815,163.049 116.266,132.868 121.119,173.443 104.244,136.226 96.322,176.314 91.774,135.704 71.851,171.382 80.075,131.354 50.102,159.129 70.293,123.602 33.204,140.756 63.385,113.207 22.811,118.06 60.028,101.186 19.939,93.263 60.549,88.715 24.871,68.792 64.899,77.016 37.124,47.043 72.651,67.234 55.497,30.145 83.046,60.326 78.193,19.752 95.067,56.969 102.99,16.881 107.538,57.49 127.461,21.813 119.237,61.84 149.21,34.065 129.019,69.592 166.108,52.439 135.927,79.987 176.501,75.135 139.284,92.009 179.372,99.932 138.763,104.479 174.441,124.402 134.413,116.178" stroke="#e65100" stroke-width="1" fill="#ffe0b2" />
<polygon points="161.328,155.626 127.658,128.644 152.388,164.001 122.901,132.502 142.347,171.018 117.643,135.643 131.41,176.536 111.991,138.005 119.798,180.44 106.061,139.538 107.75,182.652 99.973,140.212 95.509,183.127 93.851,140.012 83.325,181.855 87.82,138.943 71.446,178.863 82.003,137.027 60.114,174.21 76.517,134.302 49.559,167.991 71.475,130.824 39.997,160.334 66.979,126.664 31.622,151.394 63.121,121.907 24.604,141.353 59.979,116.649 19.087,130.416 57.618,110.997 15.183,118.805 56.085,105.067 12.971,106.756 55.411,98.979 12.496,94.515 55.611,92.857 13.767,82.331 56.68,86.826 16.76,70.452 58.596,81.009 21.413,59.12 61.321,75.523 27.632,48.565 64.799,70.481 35.289,39.003 68.959,65.985 44.229,30.628 73.716,62.127 54.27,23.611 78.974,58.986 65.207,18.093 84.626,56.624 76.818,14.189 90.556,55.091 88.867,11.977 96.644,54.418 101.108,11.502 102.766,54.617 113.292,12.774 108.797,55.686 125.171,15.767 114.614,57.603 136.503,20.419 120.1,60.327 147.058,26.638 125.142,63.805 156.62,34.295 129.638,67.965 164.995,43.235 133.496,72.722 172.012,53.276 136.637,77.98 177.53,64.213 138.999,83.632 181.434,75.825 140.532,89.562 183.646,87.873 141.205,95.65 184.121,100.114 141.006,101.772 182.849,112.298 139.937,107.803 179.856,124.177 138.02,113.62 175.203,135.509 135.296,119.106 168.985,146.064 131.818,124.148" stroke="#e65100" stroke-width="1" fill="#ffe0b2" />
Share
Ad
Comments