zui-svg

Internal

Calling internal SVG sprites either embedded in the DOM or inline.

Note: Internal svg's referenced by <zui-svg> in IE11 will not scale, they currently require a fixed height and width (like zui-icon's provide).

<zui-svg> sprites

<svg> sprite

<svg> with 200px width (inline)

External

Calling external SVG sprites or external files.

<zui-svg> sprites with defined viewBox

<zui-svg> sprite (external file)

<svg> with 50px width (external file)

<svg> with no defined width or height (external file)

Scalable SVGs for IE11 (Canvas hack)

In IE11, <svg> that have a <use> tag do not scale correctly. A hack using <canvas> is used to fix scaling. Below are hard coded examples that recreate what the IE11 render for <zui-svg> html templates look like.

Article link with more information

<svg> examples recreating .medium (w 24px h 24px) and container set to 250px

Note: if using container to determine <zui-svg> width, the container must also have `height: 100%` set for IE.