mozilla

Compare Revisions

SVG In HTML Introduction

Change Revisions

Revision 54274:

Revision 54274 by Gfldex on

Revision 54275:

Revision 54275 by Gfldex on

Title:
SVG In HTML Introduction
SVG In HTML Introduction
Slug:
SVG_In_HTML_Introduction
SVG_In_HTML_Introduction
Tags:
SVG
SVG
Content:

Revision 54274
Revision 54275
n92 <pre>n92 
93</div>
94 
95== Details ==
96 
97The <code>viewBox</code> attribute establishes a logi
>cal coordinate system which the SVG picture's coordinates are rel 
>ative to. In this case our picture is laid out in a 100 by 100 vi 
>ewport. 
98 
99The <code>preserveAspectRatio</code> attribute specif
>ies that the aspect ratio must be preserved by centering the pict 
>ure in the available size, sizing to the maximum of the height or 
> width and then cutting off any overflow. 
100 
101The <code>style</code> attribute pins the SVG element
> to the background of the form. 
102 
103== Related Links ==
104* Another SVG in XHTML example: [[SVG:Namespaces Crash Course:Exa
>mple|A swarm of motes]] 
105* [http://svg-whiz.com/wiki/index.php?title=Inline_SVG Inline SVG
>] page on SVG wiki 
106* [http://jwatt.org/svg/demos/xhtml-with-inline-svg.xhtml Working
> example] that works in both Mozilla and in Internet Explorer wit 
>h Adobe's SVG Viewer installed. (For inline SVG to work in both F 
>irefox and Internet Explorer it is necessary to serve documents w 
>ith a different Content-Type to each browser. For this reason, if 
> you're behind a proxy server that caches the page, the example w 
>ont work in the second browser you load it in because it will rec 
>eive the wrong Content-Type.) 
107 
108[[Category:SVG]]
109 
110[[pl:SVG w XHTML - Wprowadzenie]]
111 
112[[fr:Introduction à SVG dans HTML]]
113[[ja:SVG In HTML Introduction]]
tt95    <h3 name="Details">
96      Details
97    </h3>
98    <p>
99      The <code>viewBox</code> attribute establishes a logical co
 >ordinate system which the SVG picture's coordinates are relative 
 >to. In this case our picture is laid out in a 100 by 100 viewport
 >.
100    </p>
101    <p>
102      The <code>preserveAspectRatio</code> attribute specifies th
 >at the aspect ratio must be preserved by centering the picture in
 > the available size, sizing to the maximum of the height or width
 > and then cutting off any overflow.
103    </p>
104    <p>
105      The <code>style</code> attribute pins the SVG element to th
 >e background of the form.
106    </p>
107    <h3 name="Related_Links">
108      Related Links
109    </h3>
110    <ul>
111      <li>Another SVG in XHTML example: <a href="en/SVG/Namespace
 >s_Crash_Course/Example">A swarm of motes</a>
112      </li>
113      <li>
114        <a class="external" href="http://svg-whiz.com/wiki/index.
 >php?title=Inline_SVG">Inline SVG</a> page on SVG wiki
115      </li>
116      <li>
117        <a class="external" href="http://jwatt.org/svg/demos/xhtm
 >l-with-inline-svg.xhtml">Working example</a> that works in both M
 >ozilla and in Internet Explorer with Adobe's SVG Viewer installed
 >. (For inline SVG to work in both Firefox and Internet Explorer i
 >t is necessary to serve documents with a different Content-Type t
 >o each browser. For this reason, if you're behind a proxy server 
 >that caches the page, the example wont work in the second browser
 > you load it in because it will receive the wrong Content-Type.)
118      </li>
119    </ul>{{ languages( { "pl": "pl/SVG_w_XHTML_-_Wprowadzenie", "
 >fr": "fr/Introduction_\u00e0_SVG_dans_HTML", "ja": "ja/SVG_In_HTM
 >L_Introduction" } ) }}

Back to History