SVG

스케일러블 벡터 그래픽스 (Scaleble Vector Graphic, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일형식으로, 1999년 W3C의 주도하에 개발된 오픈 표준의 벡처 그래픽 파일 형식입니다.

Sample1 : Rect

<div class="well clearfix">
    <div class="block1">
        <svg width="200" height="200" style="background: #ffebee">
            <rect x="30" y="30" width="140" height="140" stroke="#880e4f" stroke-width="0" fill="#f48fb1" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #ffebee">
            <rect x="30" y="30" width="140" height="140" stroke="#880e4f" stroke-width="5" fill="#f48fb1" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #ffebee">
            <rect x="30" y="30" width="140" height="140" stroke="#880e4f" stroke-width="10" fill="#f48fb1" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #ffebee">
            <rect x="30" y="30" width="140" height="140" stroke="#880e4f" stroke-width="20" fill="#f48fb1" />
        </svg>
    </div>
</div>

Sample2 : Rect : border-radius

<div class="well clearfix">
    <div class="block1">
        <svg width='200' height='200' style='background: #ffebee'>
            <rect x='30' y='30' width='140' height='140' stroke='#880e3f' stroke-width='0' fill='#f48fb1' />
        </svg>
    </div>
    <div class="block1">
        <svg width='200' height='200' style='background: #ffebee'>
            <rect x='30' y='30' width='140' height='140' stroke='#880e3f' stroke-width='5' fill='#f48fb1' />
        </svg>
    </div>
    <div class="block1">
        <svg width='200' height='200' style='background: #ffebee'>
            <rect x='30' y='30' width='140' height='140' stroke='#880e3f' stroke-width='10' fill='#f48fb1' />
        </svg>
    </div>
    <div class="block1">
        <svg width='200' height='200' style='background: #ffebee'>
            <rect x='30' y='30' width='140' height='140' stroke='#880e3f' stroke-width='20' fill='#f48fb1' />
        </svg>
    </div>
</div>

Sample3 : Rect : circle

<div class="well clearfix">
    <div class="block1">
        <svg width='200' height='200' style='background: #ffebee'>
            <rect x='30' y='30' width='140' height='140' stroke='#880e3f' stroke-width='0' fill='#f48fb1' />
        </svg>
    </div>
    <div class="block1">
        <svg width='200' height='200' style='background: #ffebee'>
            <rect x='30' y='30' width='140' height='140' stroke='#880e3f' stroke-width='5' fill='#f48fb1' />
        </svg>
    </div>
    <div class="block1">
        <svg width='200' height='200' style='background: #ffebee'>
            <rect x='30' y='30' width='140' height='140' stroke='#880e3f' stroke-width='10' fill='#f48fb1' />
        </svg>
    </div>
    <div class="block1">
        <svg width='200' height='200' style='background: #ffebee'>
            <rect x='30' y='30' width='140' height='140' stroke='#880e3f' stroke-width='20' fill='#f48fb1' />
        </svg>
    </div>
</div>

Sample4 :ellipse

<div class="well clearfix">
<div class="block1">
	<svg width="200" height="200" style="background: #e3f3fd">
		<ellipse cx="100" cy="100" rx="90" ry="90" stroke="#0d47a1" stroke-width="5" fill="#bbdefb" />
	</svg>
</div>
<div class="block1">
	<svg width="200" height="200" style="background: #e3f3fd">
		<ellipse cx="100" cy="100" rx="90" ry="70" stroke="#0d47a1" stroke-width="5" fill="#bbdefb" />
	</svg>
</div>
<div class="block1">
	<svg width="200" height="200" style="background: #e3f3fd">
		<ellipse cx="100" cy="100" rx="90" ry="50" stroke="#0d47a1" stroke-width="5" fill="#bbdefb" />
	</svg>
</div>
<div class="block1">
	<svg width="200" height="200" style="background: #e3f3fd">
		<ellipse cx="100" cy="100" rx="90" ry="30" stroke="#0d47a1" stroke-width="5" fill="#bbdefb" />
	</svg>
</div>
<div class="block1">
	<svg width="200" height="200" style="background: #e3f3fd">
		<ellipse cx="100" cy="100" rx="30" ry="90" stroke="#0d47a1" stroke-width="5" fill="#bbdefb" />
	</svg>
</div>
<div class="block1">
	<svg width="200" height="200" style="background: #e3f3fd">
		<ellipse cx="100" cy="100" rx="50" ry="90" stroke="#0d47a1" stroke-width="5" fill="#bbdefb" />
	</svg>
</div>
<div class="block1">
	<svg width="200" height="200" style="background: #e3f3fd">
		<ellipse cx="100" cy="100" rx="70" ry="90" stroke="#0d47a1" stroke-width="5" fill="#bbdefb" />
	</svg>
</div>
<div class="block1">
	<svg width="200" height="200" style="background: #e3f3fd">
		<ellipse cx="100" cy="100" rx="90" ry="90" stroke="#0d47a1" stroke-width="5" fill="#bbdefb" />
	</svg>
</div>
</div>

Sample5 :polygon

<div class="well clearfix">
	<div class="block1">
		<svg width="200" height="200" style="background: #fff3e0">
			<polygon points="26.008,65.866 164.414,51.604 107.563,178.598" stroke="#e65100" stroke-width="5" fill="#ffe0b2" />
		</svg>
	</div>
	<div class="block1">
		<svg width="200" height="200" style="background: #fff3e0">
			<polygon points="169,132 94.397,174.282 31.131,116.396 66.633,38.34 
151.84,47.983 " stroke="#e65100" stroke-width="5" fill="#ffe0b2" />
		</svg>
	</div>
	<div class="block1">
		<svg width="200" height="200" style="background: #fff3e0">
			<polygon points="142.436,134.44 86.894,155.762 
40.658,118.321 49.964,59.56 105.507,38.238 151.744,75.679 " stroke="#e65100" stroke-width="5" fill="#ffe0b2" />
		</svg>
	</div>
	<div class="block1">
		<svg width="200" height="200" style="background: #fff3e0">
			<polygon points="70.929,153.151 34.927,108.007 
47.776,51.713 99.8,26.659 151.823,51.713 164.672,108.007 128.671,153.151 " stroke="#e65100" stroke-width="5" fill="#ffe0b2" />
		</svg>
	</div>
	<div class="block1">
		<svg width="200" height="200" style="background: #fff3e0">
			<polygon points="99.2,33.124 114.663,80.716 
164.704,80.716 124.221,110.13 139.684,157.722 99.2,128.309 58.715,157.722 74.179,110.13 33.695,80.716 83.736,80.716 " stroke="#e65100" stroke-width="5" fill="#ffe0b2" />
		</svg>
	</div>
	<div class="block1">
		<svg width="200" height="200" style="background: #fff3e0">
			<polygon points="115.492,32.672 127.393,70.02 
165.687,78.387 139.294,107.366 151.195,144.714 112.9,136.347 86.507,165.327 74.606,127.979 36.313,119.612 62.706,90.632 
50.805,53.286 89.099,61.652 " stroke="#e65100" stroke-width="5" fill="#ffe0b2" />
		</svg>
	</div>
	<div class="block1">
		<svg width="200" height="200" style="background: #fff3e0">
			<polygon points="155.2,162 114.344,138.466 
95.095,181.508 82.846,135.977 38.8,152.801 62.334,111.944 19.292,92.695 64.823,80.446 47.999,36.4 88.855,59.935 108.104,16.893 
120.354,62.424 164.399,45.6 140.865,86.456 183.907,105.705 138.376,117.954 " stroke="#e65100" stroke-width="5" fill="#ffe0b2" />
		</svg>
	</div>
	<div class="block1">
		<svg width="200" height="200" style="background: #fff3e0">
			<polygon points="158.001,147.6 124.764,126.773 
140.728,162.601 115.105,132.903 119.801,171.844 104.07,135.914 97.078,174.509 92.637,135.538 74.58,170.356 81.823,131.809 
54.305,159.758 72.589,125.058 38.055,143.654 65.754,115.884 27.273,123.476 61.928,105.104 22.918,101.017 61.448,93.675 
25.377,78.271 64.359,82.613 34.431,57.26 70.401,72.9 49.276,39.852 79.038,65.399 68.592,27.593 89.501,60.778 90.664,21.572 
100.863,59.445 113.529,22.324 112.111,61.521 135.157,29.783 122.249,66.821 153.626,43.285 130.375,74.873 167.294,61.631 
135.765,84.962 174.948,83.19 137.942,96.192 175.906,106.048 136.713,107.564 170.085,128.174 132.186,118.069 " stroke="#e65100" stroke-width="5" fill="#ffe0b2" />
		</svg>
	</div>
</div>

Sample6 :line

<div class="well clearfix">
<div class="block1">
	<svg width="200" height="200" style="background: #e3f2fd">
		<line x1="0" y1="0" x2="200" y2="200" stroke="#0d47a1" stroke-width="2" fill="none" />
	</svg>
</div>
<div class="block1">
	<svg width="200" height="200" style="background: #e3f2fd">
		<line  x1="50" y1="50" x2="200" y2="200" stroke="#0d47a1" stroke-width="2" fill="none" />
	</svg>
</div>
<div class="block1">
	<svg width="200" height="200" style="background: #e3f2fd">
		<line x1="100" y1="100" x2="200" y2="200" stroke="#0d47a1" stroke-width="2" fill="none" />
	</svg>
</div>
<div class="block1">
	<svg width="200" height="200" style="background: #e3f2fd">
		<line x1="150" y1="150" x2="200" y2="200" stroke="#0d47a1" stroke-width="2" fill="none" />
	</svg>
</div>
</div>

Sample7 : polyline

<div class="well clearfix">
<div class="block1">
	<svg width="200" height="200" style="background: #e3f2fd">
		<polyline points="38.6,41.6 44.4,132.6 130,157.2 
160.6,84.8 87.2,42 " stroke="#0d47a1" stroke-width="2" fill="none" />
	</svg>
</div>
<div class="block1">
	<svg width="200" height="200" style="background: #e3f2fd">
		<polyline points="41.8,70.2 51.2,116 110.8,146.6 
143.4,88.6 135.8,43 99.6,48.2 94.8,89 56.6,69 " stroke="#0d47a1" stroke-width="2" fill="none" />
	</svg>
</div>
<div class="block1">
	<svg width="200" height="200" style="background: #e3f2fd">
		<polyline points="46.4,59.8 63.6,148.6 135,141.6 
141.4,62.4 26.6,103.4 " stroke="#0d47a1" stroke-width="2" fill="none" />
	</svg>
</div>
<div class="block1">
	<svg width="200" height="200" style="background: #e3f2fd">
		<polyline points="46.4,59.8 63.6,148.6 135,141.6 
141.4,62.4 26.6," stroke="#0d47a1" stroke-width="2" fill="none" />
	</svg>
</div>
</div>

Sample8 : path

<div class="well clearfix">
	<div class="block1">
		<svg width="200" height="200" style="background: #e3f2fd">
		   <path d="M19.092,14.703c0,95.418,75.1,172.63,167.908,172.63" stroke="#0d47a1" stroke-width="2" fill="none" />
		</svg>
	</div>
	<div class="block1">
		<svg width="200" height="200" style="background: #e3f2fd">
			<path d="M188.876,141.665c-35.899,41.053-98.28,45.232-139.333,9.333
C16.7,122.279,13.358,72.374,42.076,39.531c22.975-26.274,62.899-28.948,89.173-5.973c21.019,18.38,23.159,50.319,4.779,71.339
c-14.704,16.815-40.256,18.527-57.071,3.823c-13.452-11.763-14.822-32.204-3.058-45.657c9.411-10.762,25.764-11.857,36.525-2.447
c8.609,7.528,9.486,20.611,1.957,29.22c-6.023,6.888-16.489,7.589-23.376,1.566c-5.51-4.818-6.071-13.191-1.253-18.701" stroke="#0d47a1" stroke-width="2" fill="none" />
		</svg>
	</div>
	<div class="block1">
		<svg width="200" height="200" style="background: #e3f2fd">
		   <path d="M124.038,120.839
c42.322,42.322-13.811,68.497-18.215,8.493c4.404,60.004-55.42,43.975-19.414-5.201c-36.006,49.176-71.531-1.56-11.528-16.464
c-60.003,14.904-54.605-46.795,1.752-20.021C20.276,60.872,64.071,17.077,90.845,73.434c-26.773-56.357,34.926-61.755,20.021-1.752
c14.904-60.003,65.64-24.478,16.464,11.528c49.176-36.006,65.205,23.818,5.201,19.413
C192.535,107.028,166.36,163.161,124.038,120.839z" stroke="#0d47a1" stroke-width="2" fill="none" />
		</svg>
	</div>
	<div class="block1">
		<svg width="200" height="200" style="background: #e3f2fd">
		   <path  d="M138.945,135.964
c-34.508-34.51-39.939-31.977-36.348,16.949c-3.592-48.926-9.38-50.477-38.74-10.381c29.359-40.096,25.922-45.005-23.004-32.853
C89.78,97.527,90.302,91.557,44.35,69.726c45.952,21.831,50.19,17.593,28.36-28.36c21.83,45.953,27.8,45.431,39.953-3.495
c-12.152,48.926-7.243,52.363,32.854,23.004c-40.098,29.359-38.547,35.148,10.379,38.74
C106.97,96.023,104.438,101.454,138.945,135.964z" stroke="#0d47a1" stroke-width="2" fill="none" />
		</svg>
	</div>


	 <div class="block1">
		<svg width="200" height="200" style="background: #e3f2fd">
		   <path d="M43.111,22.734c1.882,2.159-8.673,11.357-6.791,13.517
c1.882,2.159,12.436-7.039,14.318-4.88c1.882,2.16-8.672,11.358-6.789,13.518c1.884,2.162,12.438-7.036,14.322-4.875
c1.883,2.16-8.672,11.358-6.789,13.518c1.882,2.16,12.437-7.038,14.319-4.879c1.883,2.161-8.671,11.359-6.788,13.519
c1.884,2.161,12.438-7.037,14.322-4.875c1.883,2.16-8.672,11.358-6.789,13.519c1.883,2.161,12.437-7.037,14.321-4.877
c1.884,2.162-8.671,11.36-6.787,13.521c1.883,2.161,12.437-7.037,14.32-4.877c1.884,2.162-8.671,11.36-6.787,13.521
c1.883,2.161,12.438-7.037,14.321-4.876c1.884,2.161-8.671,11.36-6.787,13.521c1.884,2.161,12.438-7.037,14.322-4.875
c1.884,2.162-8.67,11.36-6.786,13.522c1.884,2.161,12.438-7.037,14.322-4.875c1.884,2.162-8.67,11.36-6.786,13.522
c1.884,2.162,12.439-7.036,14.323-4.873c1.883,2.161-8.671,11.359-6.787,13.521c1.882,2.16,12.437-7.038,14.319-4.878
c1.884,2.162-8.67,11.36-6.786,13.522c1.883,2.161,12.437-7.037,14.321-4.877c1.884,2.162-8.67,11.36-6.786,13.522
c1.885,2.163,12.439-7.035,14.324-4.873s-8.67,11.361-6.785,13.524c1.885,2.163,12.439-7.035,14.324-4.873
c1.884,2.162-8.67,11.36-6.786,13.522c1.885,2.162,12.439-7.036,14.324-4.873c1.886,2.164-8.668,11.362-6.782,13.527
c1.887,2.166,12.442-7.032,14.329-4.866c1.887,2.166-8.667,11.364-6.779,13.53" stroke-width="2" fill="none" stroke="#0d47a1" />
		</svg>
	</div>
	 <div class="block1">
		<svg width="200" height="200" style="background: #e3f2fd">
		   <path  d="M142.513,134.58
c-2.137,2.286-11.237-9.395-13.977-7.881c-2.738,1.513,4.032,13.767,1.295,15.279c-2.74,1.514-9.511-10.739-12.251-9.226
c-2.742,1.515,4.027,13.769,1.285,15.283c-2.742,1.516-7.12-10.563-10.196-9.97c-3.073,0.594-2.642,13.434-5.747,13.048
c-3.104-0.385-1.379-14.278-4.482-14.663c-3.107-0.387-4.833,13.506-7.939,13.12c-3.109-0.386-1.384-14.278-4.493-14.664
c-3.109-0.387-7.208,13.842-10.045,12.515c-2.833-1.325,5.461-13.59,3.177-15.727c-2.285-2.137-11.848,8.089-14.132,5.952
c-2.287-2.139,7.276-12.363,4.989-14.502c-2.289-2.141-11.851,8.085-14.14,5.944c-2.289-2.14,7.846-10.036,6.331-12.778
c-1.514-2.739-13.592,1.639-14.185-1.435c-0.593-3.071,13.154-5.724,12.561-8.795c-0.593-3.073-14.339-0.422-14.932-3.495
c-0.594-3.076,13.153-5.729,12.559-8.805c-0.593-3.076-15.393-2.579-15.007-5.688c0.385-3.105,14.613,0.995,15.94-1.84
c1.326-2.833-11.354-8.768-10.028-11.601c1.327-2.835,14.007,3.099,15.333,0.264c1.328-2.837-11.352-8.772-10.023-11.609
c1.328-2.837,11.97,4.361,14.109,2.073c2.137-2.286-5.76-12.421-3.021-13.934c2.738-1.513,9.508,10.741,12.247,9.229
c2.74-1.514-4.03-13.768-1.29-15.282c2.742-1.515,9.512,10.739,12.254,9.224c2.742-1.515-2.304-15.436,0.772-16.03
c3.073-0.593,3.57,14.206,6.676,14.591c3.104,0.385,4.83-13.508,7.935-13.123c3.106,0.386,1.381,14.279,4.488,14.666
c3.108,0.386,4.834-13.507,7.942-13.122c3.109,0.386-0.448,12.732,2.39,14.06c2.833,1.325,10.032-9.317,12.316-7.181
c2.285,2.137-7.278,12.362-4.993,14.499c2.287,2.139,11.85-8.087,14.137-5.948c2.288,2.14-7.274,12.365-4.986,14.505
s13.969-6.961,15.485-4.219c1.514,2.739-12.407,7.786-11.814,10.858c0.593,3.071,14.339,0.419,14.932,3.49
c0.593,3.074-13.153,5.726-12.561,8.8c0.593,3.076,14.34,0.423,14.934,3.5s-12.247,3.507-12.633,6.617
c-0.386,3.106,11.96,6.664,10.633,9.498c-1.325,2.833-14.006-3.101-15.331-0.268c-1.327,2.835,11.353,8.77,10.025,11.604
c-1.327,2.838-16.362,0.578-15.928,3.681C133.9,130.633,144.652,132.292,142.513,134.58z" stroke="#0d47a1" stroke-width="2" fill="none" />
		</svg>
	</div>
	 <div class="block1">
		<svg width="200" height="200" style="background: #e3f2fd">
		   <path  d="M175.761,168.301
c-98.721-89.803-81.966-84.773-62.657-18.81c-19.309-65.963-5.668-76.914-51.015,40.951
c45.347-117.865,45.742-100.376-1.473-65.403c47.214-34.973,61.843-25.382-54.711-35.866
c116.554,10.483,100.043,16.262,61.746-21.61c38.297,37.873,33.698,54.75,17.203-63.115
c16.495,117.865,5.897,103.947,39.635,52.046c-33.738,51.901-51.211,52.743,65.344-3.144
C73.277,109.236,83.239,94.856,152.58,107.127C83.239,94.856,77.04,78.498,175.761,168.301z" stroke="#0d47a1" stroke-width="2" fill="none" />
		</svg>
	</div>
	 <div class="block1">
		<svg width="200" height="200" style="background: #e3f2fd">
		   <path  d="M143,177
c-28,2-58-14-69-41c-14,8-17,28-11,43c-17-22-20-54-6-78c-10-5-22-1-31,5c-4,4-8,7-11,12c9-26,31-48,59-51c-5-17-26-23-43-21
c26-10,58-8,79,13c4-6,4-13,3-20c-1-3-2-6-3-9c-3-7-9-13-14-19c25,14,44,40,44,69c5-1,9-4,13-7c2-2,3-5,5-7c4-8,8-17,7-27
c8,28,0,60-23,79c14,10,34,5,46-6c-17,23-46,38-75,32C112,161,128,173,143,177L143,177z" stroke="#0d47a1" stroke-width="2" fill="none" />
		</svg>
	</div>
</div>

Sample9 : stroke-linecap / stroke-dasharray

<div class="well clearfix">
<div class="block1">
	<svg width="200" height="200" style="background:#fff3e0">
		<path stroke="#e65100" stroke-width="1" fill="none" d="M30 30 l140 00" />
		<path stroke="#e65100" stroke-width="2" fill="none" d="M30 50 l140 00" />
		<path stroke="#e65100" stroke-width="3" fill="none" d="M30 70 l140 00" />
		<path stroke="#e65100" stroke-width="4" fill="none" d="M30 90 l140 00" />
		<path stroke="#e65100" stroke-width="5" fill="none" d="M30 110 l140 00" />
		<path stroke="#e65100" stroke-width="6" fill="none" d="M30 130 l140 00" />
		<path stroke="#e65100" stroke-width="7" fill="none" d="M30 150 l140 00" />
		<path stroke="#e65100" stroke-width="8" fill="none" d="M30 170 l140 00" />
	</svg>
</div>
<div class="block1">
	<svg width="200" height="200" style="background:#fff3e0">
		<path stroke="#e65100" stroke-linecap="round" stroke-width="1" fill="none" d="M30 30 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-width="2" fill="none" d="M30 50 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-width="3" fill="none" d="M30 70 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-width="4" fill="none" d="M30 90 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-width="5" fill="none" d="M30 110 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-width="6" fill="none" d="M30 130 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-width="7" fill="none" d="M30 150 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-width="8" fill="none" d="M30 170 l140 00" />
	</svg>
</div>
<div class="block1">
	<svg width="200" height="200" style="background:#fff3e0">
	   <path stroke="#e65100" stroke-linecap="butt" stroke-width="1" fill="none" d="M30 30 l140 00" />
		<path stroke="#e65100" stroke-linecap="square" stroke-width="2" fill="none" d="M30 50 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-width="3" fill="none" d="M30 70 l140 00" />
		<path stroke="#e65100" stroke-linecap="butt" stroke-width="4" fill="none" d="M30 90 l140 00" />
		<path stroke="#e65100" stroke-linecap="square" stroke-width="5" fill="none" d="M30 110 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-width="6" fill="none" d="M30 130 l140 00" />
		<path stroke="#e65100" stroke-linecap="butt" stroke-width="7" fill="none" d="M30 150 l140 00" />
		<path stroke="#e65100" stroke-linecap="square" stroke-width="8" fill="none" d="M30 170 l140 00" />
	</svg>
</div>
<div class="block1">
	<svg width="200" height="200" style="background:#fff3e0">
		<path stroke="#e65100" stroke-dasharray="5,5" stroke-width="1" fill="none" d="M30 30 l140 00" />
		<path stroke="#e65100" stroke-dasharray="5,5" stroke-width="2" fill="none" d="M30 50 l140 00" />
		<path stroke="#e65100" stroke-dasharray="5,5" stroke-width="3" fill="none" d="M30 70 l140 00" />
		<path stroke="#e65100" stroke-dasharray="5,5" stroke-width="4" fill="none" d="M30 90 l140 00" />
		<path stroke="#e65100" stroke-dasharray="5,5" stroke-width="5" fill="none" d="M30 110 l140 00" />
		<path stroke="#e65100" stroke-dasharray="5,5" stroke-width="6" fill="none" d="M30 130 l140 00" />
		<path stroke="#e65100" stroke-dasharray="5,5" stroke-width="7" fill="none" d="M30 150 l140 00" />
		<path stroke="#e65100" stroke-dasharray="5,5" stroke-width="8" fill="none" d="M30 170 l140 00" />
	</svg>
</div>
<div class="block1">
	<svg width="200" height="200" style="background:#fff3e0">
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="0,15" stroke-width="1" fill="none" d="M30 30 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="0,15" stroke-width="2" fill="none" d="M30 50 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="0,15" stroke-width="3" fill="none" d="M30 70 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="0,15" stroke-width="4" fill="none" d="M30 90 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="0,15" stroke-width="5" fill="none" d="M30 110 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="0,15" stroke-width="6" fill="none" d="M30 130 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="0,15" stroke-width="7" fill="none" d="M30 150 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="0,15" stroke-width="8" fill="none" d="M30 170 l140 00" />
	</svg>
</div>
<div class="block1">
	<svg width="200" height="200" style="background:#fff3e0">
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="10,10" stroke-width="1" fill="none" d="M30 30 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="10,10" stroke-width="2" fill="none" d="M30 50 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="10,10" stroke-width="3" fill="none" d="M30 70 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="10,10" stroke-width="4" fill="none" d="M30 90 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="10,10" stroke-width="5" fill="none" d="M30 110 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="10,10" stroke-width="6" fill="none" d="M30 130 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="10,10" stroke-width="7" fill="none" d="M30 150 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="10,10" stroke-width="8" fill="none" d="M30 170 l140 00" />
	</svg>
</div>
<div class="block1">
	<svg width="200" height="200" style="background:#fff3e0">
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="20,10,1,5,8,15" stroke-width="1" fill="none" d="M30 30 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="20,10,1,5,8,15" stroke-width="2" fill="none" d="M30 50 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="20,10,1,5,8,15" stroke-width="3" fill="none" d="M30 70 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="20,10,1,5,8,15" stroke-width="4" fill="none" d="M30 90 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="20,10,1,5,8,15" stroke-width="5" fill="none" d="M30 110 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="20,10,1,5,8,15" stroke-width="6" fill="none" d="M30 130 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="20,10,1,5,8,15" stroke-width="7" fill="none" d="M30 150 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="20,10,1,5,8,15" stroke-width="8" fill="none" d="M30 170 l140 00" />
	</svg>
</div>
<div class="block1">
	<svg width="200" height="200" style="background:#fff3e0">
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="50,10,100" stroke-width="1" fill="none" d="M30 30 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="50,10,100" stroke-width="2" fill="none" d="M30 50 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="50,10,100" stroke-width="3" fill="none" d="M30 70 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="50,10,100" stroke-width="4" fill="none" d="M30 90 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="50,10,100" stroke-width="5" fill="none" d="M30 110 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="50,10,100" stroke-width="6" fill="none" d="M30 130 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="50,10,100" stroke-width="7" fill="none" d="M30 150 l140 00" />
		<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="50,10,100" stroke-width="8" fill="none" d="M30 1700 l140 00" />
	</svg>
</div>
</div>
			

Sample10 : linearGradient

 <div class="well clearfix">
<div class="block1">
	<svg width="200" height="200" style="background:#fff3e0">
		<radialGradient id="radialGradient1" gradientUnits="userSpaceOnUse">
			<stop  offset="0" style="stop-color:#a18cd1"/>
			<stop  offset="1" style="stop-color:#fbc2eb"/>
		</radialGradient>
		<circle cx="100" cy="100" r="80" fill="url(#radialGradient1)" />
	</svg>
</div>
<div class="block1">
	<svg width="200" height="200" style="background:#fff3e0">
		<rect x="30" y="30" width="140" height="140" stroke-width="0" fill="url(#radialGradient1)" />
	</svg>
</div>

<div class="block1">
	<svg width="200" height="200" style="background:#fff3e0">
		<ellipse cx="100" cy="100" rx="90" ry="20" stroke-width="0" fill="url(#radialGradient1)" />
	</svg>
</div>

<div class="block1">
	<svg width="200" height="200" style="background:#fff3e0">
	   <polygon  points="99.2,33.124 114.663,80.716 
164.704,80.716 124.221,110.13 139.684,157.722 99.2,128.309 58.715,157.722 74.179,110.13 33.695,80.716 83.736,80.716 " stroke="#e65100" stroke-width="0" fill="url(#radialGradient1)" />
	</svg>
</div>
</div>

Sample11 : radialGradient

Sample12 : clip-path

<div class="well clearfix">
<div class="block1">
	<svg width="200" height="200" >
		<image xlink:href="waffle.png" width="200" height="200" />
	</svg>
</div>
<div class="block1">
	<svg width="200" height="200" >
		<image xlink:href="waffle.png" width="200" height="200" clip-path="circle(100px at center)" />
	</svg>
</div>
<div class="block1">
	<svg width="200" height="200" >
		<clipPath id="clip1">
			<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"/>
		</clipPath>
		<image xlink:href="waffle.png" width="200" height="200" clip-path="url(#clip1)" />
	</svg>
</div>
<div class="block1">
	<svg width="200" height="200" >
		<clipPath id="clip2">
			<path d="M124.038,120.839
c42.322,42.322-13.811,68.497-18.215,8.493c4.404,60.004-55.42,43.975-19.414-5.201c-36.006,49.176-71.531-1.56-11.528-16.464
c-60.003,14.904-54.605-46.795,1.752-20.021C20.276,60.872,64.071,17.077,90.845,73.434c-26.773-56.357,34.926-61.755,20.021-1.752
c14.904-60.003,65.64-24.478,16.464,11.528c49.176-36.006,65.205,23.818,5.201,19.413
C192.535,107.028,166.36,163.161,124.038,120.839z" stroke="#0d47a1" stroke-width="2" fill="none" />
		</clipPath>
		<image xlink:href="waffle.png" width="200" height="200" clip-path="url(#clip2)" />
	</svg>
</div>
</div>

Sample : clip-path text

<div class="well clearfix">
    <div class="block1">
        <svg width="200" height="200" style="background:#e9defa; font-family: 'Bangers', cursive;">
            <text x="10" y="120" font-size="70">SOJIN</text>  
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background:#e9defa; font-family: 'Bangers', cursive;">
            <a xlink:href="http://choheebaek.com">   
                <text x="10" y="120" font-size="70">SOJIN</text>
            </a>      
        </svg>
    </div>
    <style>
       .textClip {
            width: 200px; height: 200px; line-height: 200px;
            text-align: center; background: url(ch.jpg);
            background-size:contain; font-size: 50px;
            font-family: 'Bangers', cursive; font-weight: bold;
            background: url(img01.jpg);
            -webkit-text-fill-color : transparent;
            -webkit-background-clip: text;
        }
    </style>
    <div class="block1" style="background:#e9defa";>
        <div class="textClip">
            SOJIN
        </div>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background:#e9defa; font-family: 'Bangers', cursive;">
            <pattern id="pattern" patternUnits="userSpaceOnUse" width="200" height="200">
                <image xlink:href="img01.jpg" width="200" height="200" />
            </pattern>
            <text x="10" y="120" font-size="70" fill="url(#pattern)">SOJIN</text>
        </svg>
    </div>
    </div>

Sample14 : blur

<div class="well clearfix">
                <div class="block1">
                  <svg width="200" height="200" style="background:#ffebee;" >
                    <defs>
                      <filter id="filter1" x="0" y="0">
                        <feGaussianBlur in="SourceGraphic" stdDeviation="0" />
                      </filter>
                    </defs>
                    <rect x="30" y="30" width="140" height="140" stroke="#880e4f"
                    stroke-width="0" fill="#f48fb1" filter="url(#filter1)" />
                  </svg>
                </div>
                <div class="block1">
                  <svg width="200" height="200" style="background:#ffebee;" >
                    <defs>
                      <filter id="filter2" x="0" y="0">
                        <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
                      </filter>
                    </defs>
                    <rect x="30" y="30" width="140" height="140" stroke="#880e4f"
                    stroke-width="0" fill="#f48fb1" filter="url(#filter2)" />
                  </svg>
                </div>
                <div class="block1">
                  <svg width="200" height="200" style="background:#ffebee;" >
                    <defs>
                      <filter id="filter3" x="0" y="0">
                        <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
                      </filter>
                    </defs>
                    <rect x="30" y="30" width="140" height="140" stroke="#880e4f"
                    stroke-width="0" fill="#f48fb1" filter="url(#filter3)" />
                  </svg>
                </div>
                <div class="block1">
                  <svg width="200" height="200" style="background:#ffebee;" >
                    <defs>
                      <filter id="filter4" x="0" y="0">
                        <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
                      </filter>
                    </defs>
                    <rect x="30" y="30" width="140" height="140" stroke="#880e4f"
                    stroke-width="0" fill="#f48fb1" filter="url(#filter4)" />
                  </svg>
                </div>
              </div>

Sample15 : animation