소개
svg는 백터(vector) 이미지를 표현하기 위한 포맷으로 w3c에서 만든 백터 이미지 표준입니다. SVG 자체는 CSS가 아닙니다만 CSS를 이용해서 다양한 효과를 줄 때 SVG를 활용하는 경우가 많기 떄문에 여기서는 SVG에 대해서 간략하게 언급만하겠습니다. (사실은 어렵게 수업을 만들고 나니까 이건 CSS가 아니잖아라는 생각을 나중에 하게 되었습니다. 만들어진 수업을 버릴까하다가 못 버리고 포함시켰습니다. 보셔도 좋고 안보셔도 좋습니다. ^^;; )
예제 - svg_1.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!doctype html><html><head> <style> img{ width:400px; } .svg{ height:400px; background-image: url(sample_vector.svg) } </style></head><body> <h1>Bitmap(png)</h1> <img src="sample_bitmap.png" alt=""> <h1>Vector(svg)</h1> <img src="sample_vector.svg" alt=""> <h1>background svg</h1> <div class="svg"></div></body></html> |
SVG로 그림 그리기
예제 - svg_sample.svg
1 2 3 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="210" height="210"> <rect x="5" y="5" width="200" height="200" style="fill:red; stroke:black; stroke-width:10px"></rect></svg> |
예제 - svg_2.html
1 2 3 4 5 6 7 8 9 10 11 | <!doctype html><html><body> <h1>file</h1> <img src="svg_sample.svg" alt=""> <h1>htmls</h1> <svg width="210" height="210"> <rect x="5" y="5" width="200" height="200" style="fill:red; stroke:black; stroke-width:10px"></rect></svg></body></html> |
