Embed Size (px)
DESCRIPTION
SVG/VML 크로스 브라우징 이슈 몇 개를 소개합니다.
Citation preview
Vector Rendering in HTML
IIImmmaaagggeee
l 정보집적도
l 데이터의 시각화
l 화려함 & 미려함
CCCSSSSSS &&& TTTyyypppooogggrrraaappphhhyyy
l 가벼움
l 깔끔함
l 일관성있음
Typography vs. Image
기기, 네트워크, 브라우저 성능/유형에 따라 달라지는 트렌드...
그러나...
대체 불가능한 상황은존재하는 법!!
SVG(Scalable Vector Graphics)1. W3C 주도하에 고안된 오픈 "표준" 벡터 그래픽 형식
2. XML 기반
3. 2D geometric transform 지원
4. filter 지원
5. animation 지원
SVG(Scalable Vector Graphics)<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><<<sssvvvggg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full" version="1.1" baseProfile="full"
width="800mm" height="600mm"> <!-- blahblah --><<</// sssvvvggg>>>
VML(Vector Markup Language)1. OOXML 표준 및 ECMA-376
2. "역시나" XML 기반
3. legacy등을 이유로 웹표준 채택 안됨
4. M$ Office 문서 및 Internet Explorer 8 이하 버전에서 사용
5. formula 지원
VML(Vector Markup Language)<html xxxmmmlllnnnsss:::vvv==="""uuurrrnnn:::sssccchhheeemmmaaasss---mmmiiicccrrrooosssooofffttt---cccooommm:::vvvmmmlll"""><head> <style> vvv\\\ :::*** {{{ bbbeeehhhaaavvviiiooorrr::: uuurrrlll(((###dddeeefffaaauuulllttt###VVVMMMLLL)));;; }}} </style></head><body> <v:line from="10pt,10pt" to="100pt,10pt" strokecolor="red" strokeweight="3pt" href="http://red"/> <v:line from="100pt,10pt" to="10pt,100pt" strokecolor="black" strokeweight="2pt"> <v:stroke dashstyle="dash"/> </v:line></body></html></html>
.vs <canvas> (HTML5)1. 각 도형 요소가 DOM element로 기억됨
2. canvas는 raster 기반
3. HTML5를 지원 안하는 브라우저
Quick Diff....tttyyypppeee SSSVVVGGG VVVMMMLLL
직선 <line> <v:line>
원 <circle><v:oval>
타원 <ellipse>
사각형 <rect> <v:rect>
모서리가 둥근 사각형 - <v:roundrect>
다각형 <polygon> -
꺾은선 <polyline> <v:polyline>
원호 - <v:arc>
곡선 - <v:curve>
텍스트 <text> -
자유도형 <path> <v:path>
설마 그럴리가....
지금부터 살펴볼 내용1. 'path' only!
2. viewport vs coordinate
3. anti-aliasing
4. event-handling
5. and more issues...
path로 대동단결
<svg><path d="...."/></svg>
<v:shape path="....."/>
<v:path m="....."/>
1. VML/SVG간 지원/미지원 도형 엘리먼트가 조금씩 있음
2. <path> 또는 <v:path>를 이용하면 거의 모든 도형 공통 대응 가능
§ svg
§ vml
path commandscccooommmmmmaaannnddd SSSVVVGGG VVVMMMLLLmove to M/m mline to L/l lcurve to (cubic bezier) C/c ccurve to (quadratic bezier) Q/q qbarc to A/a at/waclose path Z x/xeseparator(args) whitespace comma
문제는 arc!1. SVG는 인자를 통해 회전 방향을 결정
2. VML은 command 자체가 분리!
viewport vs. coordinate
<svg viewbox="0 0 100000 100000">
<v:path coordsize="100000 100000"/>
§ SVG
§ VML
viewport vs. coordinate
<svg viewbox="0 0 100000 100000">
<v:path coordsize="100000 100000"/>
§ SVG
§ VML element bound에 대응하는 가상의 좌표값
element size가 총 몇등분되는지
viewport vs. coordinate
SVGVML
viewport vs. coordinate
각 path 좌표
재계산
anti-aliasing§ 대개의 브라우저는 기본 지원
§ 특수한 상황에서는 꺼 주어야 보기에 더 좋음
§ 막대 차트
§ 수직/수평선
anti-aliasing
<path shape-rendering = "crispEdges"/>
elem.style.shapeRendering = "crispEdges";
path { shape-rendering : crispEdges; }
<v:shape style="antialias : false"/>
v\:* { antialias : false; }
elem.style.antialias = "false";
§ SVG
§ VML
anti-aliasing
<path shape-rendering = "crispEdges"/>
elem.style.shapeRendering = "crispEdges";
path { shape-rendering : crispEdges; }
<v:shape style="antialias : false"/>
v\:* { antialias : false; }
elem.style.antialias = "false";
§ SVG
§ VML
IE7 이하에서는 anti-alia
sing을 끄면 더 느림
(응??)
event-handling
cccllliiiccckkk!!!
ssseeellleeecccttteeeddd???
<SVG> or <VML>,whatever it is...
BBBOOOOOOOOO~~~!!!
event-handling(SVG)
cccllliiiccckkk!!!
pointer-events : { auto / none / visiblePainted / visibleFill / visibleStroke / painted / fill / stroke / all / inherit }
event-handling(VML)
cccllliiiccckkk!!!
* a.k.a 밑장빼기!
if(el.className!="WRRRYYY") { el.style.display = "none"; var elNext = document.elementFromPoint(x, y); elNext.fireEvent("onclick", evt);}
more issuesSSSVVVGGG VVVMMMLLL
fill-rule 기본 nonzero, 변경 가능 even-odd
radial gradient 도형의 외각에 따라 다르게 표현 말 그대로 원형
start/end arrow 별도의 marker def. 필요 기본 속성으로 지원
stroke-weight viewbox size와 관련있음 coordsize와 무관
css attributes elem.style.attr로 지정가능 대부분 read-only
animation 지원함 눈물부터 닦고 ㅠ
bonus : raphaelJS§ http://raphaeljs.com/
§ VML/SVG 크로스 브라우징 지원
§ try yourself!
