Difference between revisions of "SVG Properties"
Jump to navigation
Jump to search
(306919) |
(306919) |
||
| Line 1: | Line 1: | ||
An SVG presentation object can be used to draw svg images that scale with the panel size. | An SVG presentation object can be used to draw svg images that scale with the panel size. | ||
| + | |||
| + | == SVG Tag Parameters == | ||
| + | All the SVG code needs to reside inside a single svg tag. The SVG needs to have the following parameters: | ||
| + | * '''viewBox''': used for resizing to work. See [https://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute viewBox w3c documentation] | ||
| + | * '''xmlns''': used by some browsers to show content properly. | ||
| + | * '''xmlns:svg''': used by some browsers to show content properly. | ||
| + | In addition, the '''preserveAspectRatio''' parameter can be used to fine-tune the appearance. See [https://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute preserveAspectRatio w3c documentation] | ||
| + | |||
| + | === Example === | ||
| + | <pre> | ||
| + | <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> | ||
| + | <circle cx="100" cy="100" r="100"/> | ||
| + | </svg> | ||
| + | </pre> | ||
{{MDBTutorialAddSVG}} | {{MDBTutorialAddSVG}} | ||
[[Category: QPR MobileDashboard]] | [[Category: QPR MobileDashboard]] | ||
Revision as of 12:00, 16 March 2017
An SVG presentation object can be used to draw svg images that scale with the panel size.
SVG Tag Parameters
All the SVG code needs to reside inside a single svg tag. The SVG needs to have the following parameters:
- viewBox: used for resizing to work. See viewBox w3c documentation
- xmlns: used by some browsers to show content properly.
- xmlns:svg: used by some browsers to show content properly.
In addition, the preserveAspectRatio parameter can be used to fine-tune the appearance. See preserveAspectRatio w3c documentation
Example
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="100"/>
</svg>