воскресенье, 6 ноября 2011 г.

Getting Started: Best Practices

Despite SVG’s similarities to HTML, some frequently made errors can easily be avoided. Listed below are some common mistakes to avoid so that you don’t waste time figuring out what’s going on.

HTML5 Doctype

If you are including SVG inline in HTML5, make sure you use the HTML5 doctype . This is a requirement of HTML5. Without specifying the appropriate doctype, your page will not render in the expected document mode in IE9 or IE10. As a result, your SVG content will not appear. Don’t forget to specify the HTML5 doctype!

Default Overflow

Like other HTML elements such as
, the default overflow for a top-level inline element is visible. (This is different from the default behavior of an element in XHTML, which is "overflow: hidden.") This default means that SVG content outside the element’s bounding box will be visible. In some cases, this can lead to unexpected behavior. You can remedy this by explicitly setting either the SVG attribute overflow="hidden" on your element or by adding svg { overflow: hidden; } to your document’s CSS block.
SVG element with default overflow SVG element with overflow=hidden

default overflow is visible
SVG content is clipped

Default Text Baseline Position

If you are creating SVG by hand, you may not realize that the y attribute of and elements refers to the baseline of your text. If you do not specify the y attribute, text is positioned at y=0 relative to its containing transform. This could mean the text baseline is positioned at the top of the SVG container and end up being invisible if you’ve set overflow="hidden" as described above. So, if you don’t see your text, check to see if the y attribute is specified with a positive value.
SVG text element default y attribute SVG text positioning with the y attribute specified
(default y=0)

Accessibility

Achieving a graphic fully accessible is challenging but because SVG supports adding descriptive text and titles to individual SVG graphic elements and groups of elements, it is possible to create an SVG graphic with much greater accessibility than an HTML element’s alt text.
Without any additional markup, text content is naturally readable by screen readers. For graphic elements, adding and <desc> tags as child elements of the shape or group allows screen readers access to that descriptive text. Like the <i>title</i> attribute of an HTML <img> element, SVG title elements display as a tooltip with the mouse is hovered over the containing shape.</p> <p>The following example illustrates the <i><title></i> element on a simple drawing.</p> <div style="font-family: Consolas, Monospace; font-size: 13px; color: Black; text-indent: -4em; padding: 0 0.25in;"> <div style="background-color: #f0f0f0; padding: 0 4px 2px 4px;"> <p style="margin: 0 0 0 4em;"><span style="color: Blue;"><?</span><span style="color: rgb(163,21,21);">xml</span> <span style="color: Red;">version</span><span style="color: Blue;">=</span>"<span style="color: Blue;">1.0</span>" <span style="color: Red;">encoding</span><span style="color: Blue;">=</span>"<span style="color: Blue;">UTF-8</span>"<span style="color: Blue;">?></span></p> <p style="margin: 0 0 0 4em;"><span style="color: Blue;"><</span><span style="color: rgb(163,21,21);">svg</span> <span style="color: Red;">xmlns</span><span style="color: Blue;">=</span>"<span style="color: Blue;">http://www.w3.org/2000/svg</span>" <span style="color: Red;"> xmlns:xlink</span><span style="color: Blue;">=</span>"<span style="color: Blue;">http://www.w3.org/1999/xlink</span>" <span style="color: Red;">width</span><span style="color: Blue;">=</span>"<span style="color: Blue;">500</span>" <span style="color: Red;">height</span><span style="color: Blue;">=</span>"<span style="color: Blue;">300</span>" <span style="color: Red;">viewBox</span><span style="color: Blue;">=</span>"<span style="color: Blue;">0 0 500 300</span>"<span style="color: Blue;">></span></p> <p style="margin: 0 0 0 5em;"><span style="color: Blue;"><</span><span style="color: rgb(163,21,21);">title</span><span style="color: Blue;">></span>Abstract Art<span style="color: Blue;"></</span><span style="color: rgb(163,21,21);">title</span><span style="color: Blue;">></span></p> <p style="margin: 0 0 0 5em;"><span style="color: Blue;"><</span><span style="color: rgb(163,21,21);">style</span> <span style="color: Red;">type</span><span style="color: Blue;">=</span>"<span style="color: Blue;">text/css</span>"<span style="color: Blue;">></span></p> <p style="margin: 0 0 0 6em;">/*<span style="color: Blue;"><![CDATA[</span><span style="color: Gray;">*/</span></p> <p style="margin: 0 0 0 6em;"><span style="color: Gray;">.c0, .c1, .c2 { fill-opacity: 1; fill-rule: evenodd; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 10px; }</span></p> <p style="margin: 0 0 0 6em;"><span style="color: Gray;">.c0 { fill: #e3caad; stroke: #4e320e; }</span></p> <p style="margin: 0 0 0 6em;"><span style="color: Gray;">.c1 { fill: #bc9dc9; stroke: #4b1268; }</span></p> <p style="margin: 0 0 0 6em;"><span style="color: Gray;">.c2 { fill: #2cec7d; stroke: #2c9549; stroke-linecap: butt; stroke-linejoin: miter; }</span></p> <p style="margin: 0 0 0 6em;"><span style="color: Gray;">/*</span><span style="color: Blue;">]]></span>*/</p> <p style="margin: 0 0 0 5em;"><span style="color: Blue;"></</span><span style="color: rgb(163,21,21);">style</span><span style="color: Blue;">></span></p> <p style="margin: 0 0 0 5em;"><span style="color: Blue;"><</span><span style="color: rgb(163,21,21);">rect</span> <span style="color: Red;">class</span><span style="color: Blue;">=</span>"<span style="color: Blue;">c0</span>" <span style="color: Red;">width</span><span style="color: Blue;">=</span>"<span style="color: Blue;">131.429</span>" <span style="color: Red;">height</span><span style="color: Blue;">=</span>"<span style="color: Blue;">168.571</span>" <span style="color: Red;">x</span><span style="color: Blue;">=</span>"<span style="color: Blue;">37.143</span>" <span style="color: Red;">y</span><span style="color: Blue;">=</span>"<span style="color: Blue;">40.934</span>"<span style="color: Blue;">></span></p> <p style="margin: 0 0 0 6em;"><span style="color: Blue;"><</span><span style="color: rgb(163,21,21);">title</span><span style="color: Blue;">></span>Toast<span style="color: Blue;"></</span><span style="color: rgb(163,21,21);">title</span><span style="color: Blue;">></span></p> <p style="margin: 0 0 0 5em;"><span style="color: Blue;"></</span><span style="color: rgb(163,21,21);">rect</span><span style="color: Blue;">></span></p> <p style="margin: 0 0 0 5em;"><span style="color: Blue;"><</span><span style="color: rgb(163,21,21);">g</span><span style="color: Blue;">></span></p> <p style="margin: 0 0 0 6em;"><span style="color: Blue;"><</span><span style="color: rgb(163,21,21);">title</span><span style="color: Blue;">></span>Bunch of grapes<span style="color: Blue;"></</span><span style="color: rgb(163,21,21);">title</span><span style="color: Blue;">></span></p> <p style="margin: 0 0 0 6em;"><span style="color: Blue;"><</span><span style="color: rgb(163,21,21);">path</span> <span style="color: Red;">class</span><span style="color: Blue;">=</span>"<span style="color: Blue;">c2</span>" <span style="color: Red;">d</span><span style="color: Blue;">=</span>"<span style="color: Blue;">M314.286,78.076 340,15.219 428.571,26.648z</span>"<span style="color: Blue;">></span></p> <p style="margin: 0 0 0 7em;"><span style="color: Blue;"><</span><span style="color: rgb(163,21,21);">title</span><span style="color: Blue;">></span>Grape Leaf<span style="color: Blue;"></</span><span style="color: rgb(163,21,21);">title</span><span style="color: Blue;">></span></p> <p style="margin: 0 0 0 6em;"><span style="color: Blue;"></</span><span style="color: rgb(163,21,21);">path</span><span style="color: Blue;">></span></p> <p style="margin: 0 0 0 6em;"><span style="color: Blue;"><</span><span style="color: rgb(163,21,21);">circle</span> <span style="color: Red;">cx</span><span style="color: Blue;">=</span>"<span style="color: Blue;">270</span>" <span style="color: Red;">cy</span><span style="color: Blue;">=</span>"<span style="color: Blue;">100</span>" <span style="color: Red;">r</span><span style="color: Blue;">=</span>"<span style="color: Blue;">20</span>" <span style="color: Red;">class</span><span style="color: Blue;">=</span>"<span style="color: Blue;">c1</span>" <span style="color: Red;">id</span><span style="color: Blue;">=</span>"<span style="color: Blue;">grape</span>"<span style="color: Blue;">/></span></p> <p style="margin: 0 0 0 6em;"><span style="color: Blue;"><</span><span style="color: rgb(163,21,21);">use</span> <span style="color: Red;">xlink:href</span><span style="color: Blue;">=</span>"<span style="color: Blue;">#grape</span>" <span style="color: Red;">x</span><span style="color: Blue;">=</span>"<span style="color: Blue;">40</span>"<span style="color: Blue;">/></span></p> <p style="margin: 0 0 0 6em;"><span style="color: Blue;"><</span><span style="color: rgb(163,21,21);">use</span> <span style="color: Red;">xlink:href</span><span style="color: Blue;">=</span>"<span style="color: Blue;">#grape</span>" <span style="color: Red;">x</span><span style="color: Blue;">=</span>"<span style="color: Blue;">80</span>"<span style="color: Blue;">/></span></p> <p style="margin: 0 0 0 6em;"><span style="color: Blue;"><</span><span style="color: rgb(163,21,21);">use</span> <span style="color: Red;">xlink:href</span><span style="color: Blue;">=</span>"<span style="color: Blue;">#grape</span>" <span style="color: Red;">x</span><span style="color: Blue;">=</span>"<span style="color: Blue;">20</span>" <span style="color: Red;">y</span><span style="color: Blue;">=</span>"<span style="color: Blue;">35</span>"<span style="color: Blue;">/></span></p> <p style="margin: 0 0 0 6em;"><span style="color: Blue;"><</span><span style="color: rgb(163,21,21);">use</span> <span style="color: Red;">xlink:href</span><span style="color: Blue;">=</span>"<span style="color: Blue;">#grape</span>" <span style="color: Red;">x</span><span style="color: Blue;">=</span>"<span style="color: Blue;">60</span>" <span style="color: Red;">y</span><span style="color: Blue;">=</span>"<span style="color: Blue;">42</span>"<span style="color: Blue;">/></span></p> <p style="margin: 0 0 0 6em;"><span style="color: Blue;"><</span><span style="color: rgb(163,21,21);">use</span> <span style="color: Red;">xlink:href</span><span style="color: Blue;">=</span>"<span style="color: Blue;">#grape</span>" <span style="color: Red;">x</span><span style="color: Blue;">=</span>"<span style="color: Blue;">38</span>" <span style="color: Red;">y</span><span style="color: Blue;">=</span>"<span style="color: Blue;">80</span>"<span style="color: Blue;">/></span></p> <p style="margin: 0 0 0 5em;"><span style="color: Blue;"></</span><span style="color: rgb(163,21,21);">g</span><span style="color: Blue;">></span></p> <p style="margin: 0 0 0 4em;"><span style="color: Blue;"></</span><span style="color: rgb(163,21,21);">svg</span><span style="color: Blue;">></span></p> </div> </div> <p style="text-align: center; font-size: 8.25pt; font-style: italic;"> </p> <p>In addition, the <a href="http://www.w3.org/TR/SVGTiny12/interact.html#focusable-attr"><i>focusable</i> attribute</a> can be used to enable keyboard access to these descriptions. If <i>focusable="true"</i>, a tab stop will be created for that element, making it easy for a keyboard-centric user to focus on the shape and obtain its information from an accessibility tool. Additionally, tabbing to and from these elements will trigger the <i>focusin</i> and <i>focusout</i> events.</p> <h3>MIME type</h3> <p>If you are serving up standalone SVG files, ensure that the server is configured to be serving up the files with the proper MIME type. The correct SVG MIME type is <i>image/svg+xml</i>. This is not to be confused with image/svg-xml. Some already existing content may use the incorrect MIME type due to the Adobe SVG Viewer’s acceptance of it. Make sure you are using the correct MIME type.</p> <h3>SVGZ files</h3> <p>Similar to the above, if you are using compressed SVG, you should make the line <i> Content-Encoding: gzip</i> is in your header response of the SVG file, much like how other gzip-encoded files should have this header response line.</p> <h3>Scaling: viewBox and preserveAspectRatio</h3> <p>To ensure your graphics will scale the way that you’d like it to, specify the <a href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute">viewBox</a> attribute on your top-level <svg> element. With a viewBox specified, changing the height and width of the graphic will scale it rather than clip the SVG image.</p> <p>The <a href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute">preserveAspectRatio</a> attribute can also be used to control the scaling of images within SVG. The syntax of this attribute is preserveAspectRatio="<i>align</i> <i>meetOrSlice</i>". These two parameters describe the how an image is to fit into its containing <image> element and where the image is positioned within the container. By setting preserveAspectRatio="none", the SVG <image> element behaves like the HTML’s <img> element as illustrated below.</p> <p style="text-align: center; font-size: 8.25pt; font-style: italic;"> <img alt="Photo of two giraffes" style="vertical-align: top; border: solid 1px black !important;" src="http://ieblog.members.winisp.net/images/20111027-giraffes.jpg" width="200"><img alt="Photo of two giraffes scaled to fit odd container" style="margin-left: 0.25in; vertical-align: top; border: solid 1px black !important;" src="http://ieblog.members.winisp.net/images/20111027-giraffes.jpg" height="81" width="200"><br> <span style="display: inline-block; max-width: 424px;">Left: image at its original aspect ratio; Right: same image stretched into a 200 x 81 container with preserveAspectRatio="none"</span> </p> <p style="margin-bottom: 0">Things get interesting when preserveAspectRatio is not "none". In such cases you control how the image aligns within a container of a different aspect ratio than the image itself. The <i>meetOrSlice</i> parameter determines whether the image is scaled down to fit within the container (<i>meet</i>) or scaled up to fill the container (<i>slice</i>). The <i>align</i> parameter specifies how to align the image within its container. Three options—min, mid, and max—are provided for each direction—x and y. This yields nine combinations of alignments specified as:</p> <ul style="margin-top: 0;"><li>xMinYMin – align image in left-top corner of container</li><li>xMidYMin – align image at center-top of container</li><li>xMaxYMin – align image in right-top corner of container</li><li>xMinYMid – align image at left-middle of container</li><li>xMidYMid – align image at center-middle of container</li><li>xMaxYMid – align image at right-middle of container</li><li>xMinYMax – align image in left-bottom corner of container</li><li>xMidYMax – align image at center-bottom of container</li><li>xMaxYMax – align image in right-bottom corner of container</li></ul> <p>The following examples show how an image is aligned for its controlling alignment. Note that <i>align</i> only matters in one dimension at a time; the image exactly fills the container in the other dimension so it doesn’t matter whether that dimension is min, mid, or max.</p> <div style="margin: 1em 0; text-align: center;"> <div style="max-width: 95%; margin: 0 auto;"> <table style="margin-right: 0.25in; vertical-align: middle; display: inline-block; font-family: Consolas; font-size: 13px; text-align: right;" border="0" cellpadding="0" cellspacing="8"> <tbody><tr> <td>xMin</td> <td width="200"> <img alt="Example of preserveAspectRatio="xMinY* meet"" src="http://ieblog.members.winisp.net/images/20111027-giraffes_meet_xMin.png" width="200"></td> </tr> <tr> <td>xMid</td> <td> <img alt="Example of preserveAspectRatio="xMidY* meet"" src="http://ieblog.members.winisp.net/images/20111027-giraffes_meet_xMid.png" width="200"></td> </tr> <tr> <td>xMax</td> <td> <img alt="Example of preserveAspectRatio="xMaxY* meet"" src="http://ieblog.members.winisp.net/images/20111027-giraffes_meet_xMax.png" width="200"></td> </tr> </tbody></table> <table style="vertical-align: middle; display: inline-block; font-family: Consolas; font-size: 13px; text-align: center;" border="0" cellpadding="0" cellspacing="8"> <tbody><tr> <td>YMin</td> <td>YMid</td> <td>YMax</td> </tr> <tr> <td width="81"> <img alt="Example of preserveAspectRatio="x*YMin meet"" src="http://ieblog.members.winisp.net/images/20111027-giraffes_meet_yMin.png" height="200"></td> <td width="81"> <img alt="Example of preserveAspectRatio="x*YMid meet"" src="http://ieblog.members.winisp.net/images/20111027-giraffes_meet_yMid.png" height="200"></td> <td width="81"> <img alt="Example of preserveAspectRatio="x*YMax meet"" src="http://ieblog.members.winisp.net/images/20111027-giraffes_meet_yMax.png" height="200"></td> </tr> </tbody></table> </div> <span style="font-size: 8.25pt; font-style: italic;">meetOrSlice parameter = "meet": image is scaled down to fully fit within the container leaving empty space if the container aspect ratio differs from that of the image</span> </div> <div style="margin: 1em 0; text-align: center;"> <div style="max-width: 95%; margin: 0 auto;"> <table style="margin-right: 0.25in; vertical-align: middle; display: inline-block; font-family: Consolas; font-size: 13px; text-align: center;" border="0" cellpadding="0" cellspacing="8"> <tbody><tr> <td>xMin</td> <td>xMid</td> <td>xMax</td> </tr> <tr> <td width="81"> <img alt="Example of preserveAspectRatio="xMinY* slice"" src="http://ieblog.members.winisp.net/images/20111027-giraffes_slice_xMin.png" height="200"></td> <td width="81"> <img alt="Example of preserveAspectRatio="xMidY* slice"" src="http://ieblog.members.winisp.net/images/20111027-giraffes_slice_xMid.png" height="200"></td> <td width="81"> <img alt="Example of preserveAspectRatio="xMaxY* slice"" src="http://ieblog.members.winisp.net/images/20111027-giraffes_slice_xMax.png" height="200"></td> </tr> </tbody></table> <table style="vertical-align: middle; display: inline-block; font-family: Consolas; font-size: 13px; text-align: right;" border="0" cellpadding="0" cellspacing="8"> <tbody><tr> <td>YMin</td> <td width="200"> <img alt="Example of preserveAspectRatio="x*YMin slice"" src="http://ieblog.members.winisp.net/images/20111027-giraffes_slice_yMin.png" width="200"></td> </tr> <tr> <td>YMid</td> <td> <img alt="Example of preserveAspectRatio="x*YMid slice"" src="http://ieblog.members.winisp.net/images/20111027-giraffes_slice_yMid.png" width="200"></td> </tr> <tr> <td>YMax</td> <td> <img alt="Example of preserveAspectRatio="x*YMax slice"" src="http://ieblog.members.winisp.net/images/20111027-giraffes_slice_yMax.png" width="200"></td> </tr> </tbody></table> </div> <span style="font-size: 8.25pt; font-style: italic;">meetOrSlice parameter = "slice": image is scaled up to fully fill the container cuttin off some of the image if the container aspect ratio differs from that of the image</span> </div> <p>SVG’s preserveAspectRatio property gives you the control to define both the scaling and positioning of an image within its container. preserveAspectRatio="none" yields behavior common with HTML.</p> <h3>Scripting: SVG DOM vs. Core DOM</h3> <p>The getAttribute() and setAttribute() methods come from the DOM Core specification and apply to HTML and XML alike, including SVG. These methods are familiar, easy, and consistent ways to make changes to element attributes. Regardless of the attribute to be changed, setAttribute(<i>attribute</i>, <i>value</i>) can always be used. However, performance gains can often be attained by taking advantage of the SVG DOM. SVG supports its own DOM that exposes a multitude of attribute values and methods. Due to the nature of the SVG DOM, modifying attribute values requires a steeper learning curve than simply using setAttribute(). But the SVG DOM provides direct access to attribute values, which both improves performance and can make value manipulation simpler.</p> <p>For instance, the following function doubles the radius of a circle element using setAttribute():</p> <div style="font-family: Consolas, Monospace; font-size: 13px; color: Black; text-indent: -4em; padding: 0 0.25in;"> <div style="background-color: #f0f0f0; padding: 0 4px 2px 4px;"> <p style="margin: 0 0 0 4em;"><span style="color: Blue;">function</span> doubleCircleRadius(circle) {</p> <p style="margin: 0 0 0 6em;">circle.setAttribute(<span style="color: Maroon;">"r"</span>, 2 * parseFloat(circle.getAttribute(<span style="color: Maroon;">"r"</span>)));</p> <p style="margin: 0 0 0 4em;">}</p> </div> </div> <p>By contrast, using the SVG DOM, achieving the same effect looks like this:</p> <div style="font-family: Consolas, Monospace; font-size: 13px; color: Black; text-indent: -4em; padding: 0 0.25in;"> <div style="background-color: #f0f0f0; padding: 0 4px 2px 4px;"> <p style="margin: 0 0 0 4em;"><span style="color: Blue;">function</span> doubleCircleRadius(circle) {</p> <p style="margin: 0 0 0 6em;">circle.r.baseVal.value *= 2;</p> <p style="margin: 0 0 0 4em;">}</p> </div> </div> <p>With the setAttribute() and getAttribute() methods of the Core DOM, parsing will often be required to manipulate values. Modifying values based on the existing ones is easier done with the SVG DOM.</p> <p>Because the SVG DOM accesses attributes directly instead of dealing in strings, value type awareness is necessary and makes scripting with it more complex.</p> <p>Below is a table describing a generalization of how to access a few common attributes:</p> <table style="border-collapse: collapse; margin-left: auto; margin-right: auto;" cellpadding="0" cellspacing="0"> <tbody><tr> <th style="padding: 4px; border: 1px solid gray !important;">Value “type” </th> <th style="padding: 4px; border: 1px solid gray !important;">Attribute examples </th> <th style="padding: 4px; border: 1px solid gray !important;">DOM access </th> </tr> <tr> <td style="padding: 4px; border: 1px solid gray !important;">Presentation attribute </td> <td style="padding: 4px; border: 1px solid gray !important;">fill, stroke </td> <td style="padding: 4px; border: 1px solid gray !important;">elem.style.<i>fill</i> </td> </tr> <tr> <td style="padding: 4px; border: 1px solid gray !important;">Length </td> <td style="padding: 4px; border: 1px solid gray !important;">r, width, height, cx, cy, x, y </td> <td style="padding: 4px; border: 1px solid gray !important;">elem.<i>r</i>.baseVal.value </td> </tr> <tr> <td style="padding: 4px; border: 1px solid gray !important;">Object </td> <td style="padding: 4px; border: 1px solid gray !important;">viewBox </td> <td style="padding: 4px; border: 1px solid gray !important;">elem.<i>viewBox</i>.baseVal.<i>x</i><br> elem.<i>viewBox</i>.baseVal.<i>y</i><br> elem.<i>viewBox</i>.baseVal.<i>width</i><br> elem.<i>viewBox</i>.baseVal.<i>height</i> </td> </tr> <tr> <td style="padding: 4px; border: 1px solid gray !important;">List </td> <td style="padding: 4px; border: 1px solid gray !important;">transform, d </td> <td style="padding: 4px; border: 1px solid gray !important;">elem.<i>transform</i>.baseVal.getItem(0); </td> </tr> </tbody></table> <p>The SVG DOM interfaces are documented at the end of each chapter in the <a href="http://www.w3.org/TR/SVG/">SVG specification</a>.</p></DIV>
Автор: на

Комментариев нет:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)