mirror of
https://github.com/iconify/iconify.git
synced 2024-11-16 17:45:09 +00:00
299 lines
11 KiB
HTML
299 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!--
|
|
Tests for browser.
|
|
Open this file in browser via web server.
|
|
|
|
Before opening this file you need to compile library.
|
|
To compile library run "node build/dist".
|
|
|
|
Important: this file should be ran from web server, not file://
|
|
-->
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
|
<!--[if IE]>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20150312/classList.min.js"></script>
|
|
<![endif]-->
|
|
<title>Dimensions test</title>
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font: 16px / 24px sans-serif;
|
|
min-width: 900px;
|
|
}
|
|
|
|
#content {
|
|
padding: 16px;
|
|
}
|
|
|
|
p {
|
|
margin: 8px 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.simple-svg {
|
|
border: 1px solid #ccc;
|
|
color: #444;
|
|
transition: color .25s;
|
|
}
|
|
|
|
.simple-svg[data-icon|="fa-cc"] {
|
|
color: #080;
|
|
}
|
|
|
|
.simple-svg[data-icon="zmdi-attachment-alt"] {
|
|
color: #048;
|
|
}
|
|
|
|
.simple-svg:hover {
|
|
color: #800;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
li {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 8px 0;
|
|
border-top: 1px dotted #ccc;
|
|
}
|
|
|
|
li:first-child {
|
|
border-top-width: 0;
|
|
}
|
|
|
|
li > span {
|
|
display: inline-block;
|
|
width: 250px;
|
|
color: rgba(0, 0, 0, .7);
|
|
font: 14px / 22px sans-serif;
|
|
vertical-align: top;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
p.explain {
|
|
font: 14px / 22px sans-serif;
|
|
margin: 0 0 8px;
|
|
color: #090;
|
|
}
|
|
|
|
p.explain + p.explain {
|
|
margin-top: -8px;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
table caption {
|
|
background: #eee;
|
|
color: #000;
|
|
border: 1px solid #ccc;
|
|
border-bottom-width: 0;
|
|
padding: 4px;
|
|
}
|
|
|
|
table td, table th {
|
|
border: 1px solid #ccc;
|
|
padding: 4px;
|
|
}
|
|
table .wrong td {
|
|
color: #d00;
|
|
}
|
|
table td {
|
|
font: 16px / 18px sans-serif;
|
|
text-align: center;
|
|
min-width: 100px;
|
|
}
|
|
table td:nth-child(1), table td:nth-child(2), table td:nth-child(6) {
|
|
font: 12px / 18px sans-serif;
|
|
text-align: left;
|
|
}
|
|
table td:nth-child(5) {
|
|
background: #ccc;
|
|
}
|
|
table td:nth-child(5).empty {
|
|
background: #fff;
|
|
color: #800;
|
|
font-size: 14px;
|
|
}
|
|
table .simple-svg {
|
|
background: #fff;
|
|
border-width: 0;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="content">
|
|
<p>Visual test to see different ways to apply dimensions to image.</p>
|
|
<p>Using 128 x 128 emoji images for tests, 240 x 512 zmdi-attachment-alt (thin image), 2304 x 1792 fa-cc-jcb (wide image).</p>
|
|
|
|
<table>
|
|
<caption>Examples of calculated width and height for zmdi-pause.<br />SVG size is 256 x 512, so width/height ratio is 0.5</caption>
|
|
<tr>
|
|
<th></th>
|
|
<th>Code</th>
|
|
<th>Width</th>
|
|
<th>Height</th>
|
|
<th>Sample</th>
|
|
<th>Explanation</th>
|
|
</tr>
|
|
<tr>
|
|
<td>No values</td>
|
|
<td><i class="simple-svg" data-icon="zmdi-pause"/></td>
|
|
<td>0.5em</td>
|
|
<td>1em</td>
|
|
<td><i class="simple-svg" data-icon="zmdi-pause"></i></td>
|
|
<td>If attributes are missing, height is set to 1em.<br />Width is calculated using SVG width/height ratio.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Using one attribute</td>
|
|
<td><i class="simple-svg" data-icon="zmdi-pause" height="16px"/></td>
|
|
<td>8px</td>
|
|
<td>16px</td>
|
|
<td><i class="simple-svg" data-icon="zmdi-pause" height="16px"></i></td>
|
|
<td>Width is calculated using width/height ratio.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Wrong width/height ratio</td>
|
|
<td><i class="simple-svg" data-icon="zmdi-pause" width="32px" height="32px"/></td>
|
|
<td>32px</td>
|
|
<td>32px</td>
|
|
<td><i class="simple-svg" data-icon="zmdi-pause" width="32px" height="32px"></i></td>
|
|
<td>Even though dimensions have different aspect ratio than SVG, image will not be distorted.<br />Image will be scaled down to fit and centered inside 32 x 32 square.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Using one attribute</td>
|
|
<td><i class="simple-svg" data-icon="zmdi-pause" data-width="2em"/></td>
|
|
<td>2em</td>
|
|
<td>4em</td>
|
|
<td><i class="simple-svg" data-icon="zmdi-pause" data-width="2em"></i></td>
|
|
<td>Height is calculated using SVG width/height ratio.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Using one attribute</td>
|
|
<td><i class="simple-svg" data-icon="zmdi-pause" data-width="32" width="16"/></td>
|
|
<td>16px</td>
|
|
<td>32px</td>
|
|
<td><i class="simple-svg" data-icon="zmdi-pause" data-width="32" width="16"></i></td>
|
|
<td>Width takes priority over data-width.<br />Height is calculated using SVG width/height ratio.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>"auto" in attribute</td>
|
|
<td><i class="simple-svg" data-icon="zmdi-pause" width="auto"/></td>
|
|
<td>256</td>
|
|
<td>512</td>
|
|
<td class="empty">too large to show</td>
|
|
<td>Width is set to original SVG width.<br />Height is calculated using SVG width/height ratio.</td>
|
|
</tr>
|
|
<tr class="wrong">
|
|
<td>css with "auto"</td>
|
|
<td><i class="simple-svg" data-icon="zmdi-pause" style="width: auto; max-width: 100%"/></td>
|
|
<td>0.5em,<br />broken in IE</td>
|
|
<td>1em,<br />broken in IE</td>
|
|
<td><i class="simple-svg" data-icon="zmdi-pause" style="width: auto; max-width: 100%; height: auto;"></i></td>
|
|
<td>Image will behave differently in Internet Explorer (up to MS Edge 12) than in other browsers.<br />>Never use keyword "auto" in width or height in inline style or css.</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<p class="explain">
|
|
How image dimensions are handled by SimpleSVG:<br />
|
|
- You can set dimensions using width and height attributes (<svg width="16px" height="16px").<br />
|
|
If one dimension is set, another one is set automatically by SimpleSVG using width/height ratio of original SVG image.<br />
|
|
For example, fa-apple size is 1408 x 1792. If you set height="16", width will be automatically set to 20.37 (1792 / 1408 * 16), keeping same width/height ratio as in original image.<br />
|
|
- You can also use data-width and data-height attributes. They are aliases for width and height attributes, checked if width or height attributes are missing.<br />
|
|
- If width and height attributes are missing, height is set to 1em, width is set to (svg width / svg height)em.<br />
|
|
- If width or height attribute (attribute - not css rule!) is set to "auto", dimensions will be set to original svg dimensions.<br />
|
|
- You can set dimensions using stylesheet or inline style attribute, but these dimensions will not be parsed by SimpleSVG.<br />
|
|
Never use keyword "auto" when setting SVG width or height via stylesheet or inline style. Internet Explorer (MS Edge 12) cannot handle it.<br />
|
|
</p>
|
|
|
|
<hr />
|
|
|
|
<p>Tests using only height:</p>
|
|
<ul>
|
|
<li><span>data-height="32px"</span>
|
|
<i class="simple-svg" data-icon="noto-blossom" data-height="32px"></i>
|
|
<i class="simple-svg" data-icon="zmdi-attachment-alt" data-height="32px"></i>
|
|
<i class="fa fa-cc-jcb" data-height="32px"></i>
|
|
</li>
|
|
<li><span>height="32px"</span>
|
|
<i class="simple-svg" data-icon="noto-bomb" height="32px"></i>
|
|
<i class="simple-svg" data-icon="zmdi-attachment-alt" height="32px"></i>
|
|
<i class="fa fa-cc-jcb" height="32px"></i>
|
|
</li>
|
|
<li><span>style="height: 32px;"</span>
|
|
<i class="simple-svg" data-icon="noto-boot" style="height: 32px;"></i>
|
|
<i class="simple-svg" data-icon="zmdi-attachment-alt" style="height: 32px;"></i>
|
|
<i class="fa fa-cc-jcb" style="height: 32px;"></i>
|
|
</li>
|
|
</ul>
|
|
<p>Tests using only width:</p>
|
|
<ul>
|
|
<li><span>data-width="32px"</span>
|
|
<i class="simple-svg" data-icon="noto-clap" data-width="32px"></i>
|
|
<i class="simple-svg" data-icon="zmdi-attachment-alt" data-width="32px"></i>
|
|
<i class="fa fa-cc-jcb" data-width="32px"></i>
|
|
</li>
|
|
<li><span>width="32px"</span>
|
|
<i class="simple-svg" data-icon="noto-dart" width="32px"></i>
|
|
<i class="simple-svg" data-icon="zmdi-attachment-alt" width="32px"></i>
|
|
<i class="fa fa-cc-jcb" width="32px"></i>
|
|
</li>
|
|
<li><span>style="width: 32px;"</span>
|
|
<i class="simple-svg" data-icon="noto-cow" style="width: 32px;"></i>
|
|
<i class="simple-svg" data-icon="zmdi-attachment-alt" style="width: 32px;"></i>
|
|
<i class="fa fa-cc-jcb" style="width: 32px;"></i>
|
|
</li>
|
|
</ul>
|
|
<p>Both width and height:</p>
|
|
<ul>
|
|
<li><span>data-width="32px" data-height="32px"</span>
|
|
<i class="simple-svg" data-icon="noto-clap" data-width="32px" data-height="32px"></i>
|
|
<i class="simple-svg" data-icon="zmdi-attachment-alt" data-width="32px" data-height="32px"></i>
|
|
<i class="fa fa-cc-jcb" data-width="32px" data-height="32px"></i>
|
|
</li>
|
|
<li><span>width="32px" height="32px"</span>
|
|
<i class="simple-svg" data-icon="noto-dart" width="32px" height="32px"></i>
|
|
<i class="simple-svg" data-icon="zmdi-attachment-alt" width="32px" height="32px"></i>
|
|
<i class="fa fa-cc-jcb" width="32px" height="32px"></i>
|
|
</li>
|
|
<li><span>style="width: 32px; height: 32px;"</span>
|
|
<i class="simple-svg" data-icon="noto-cow" style="width: 32px; height: 32px;"></i>
|
|
<i class="simple-svg" data-icon="zmdi-attachment-alt" style="width: 32px; height: 32px;"></i>
|
|
<i class="fa fa-cc-jcb" style="width: 32px; height: 32px;"></i>
|
|
</li>
|
|
</ul>
|
|
<p>Automatic dimensions:</p>
|
|
<ul>
|
|
<li><span>BAD EXAMPLE: style="width: auto;"</span>
|
|
<p class="explain">Width and height in inline style aren't parsed, so this will be shown as is. Height is set to 1em when its missing, so images should be 1m (16px) high.</p>
|
|
<p class="explain">DO NOT EVER use width:auto or height:auto in stylesheet for SVG images. Internet Explorer cannot handle automatic width or height for SVG. Unfortunately there are still people using that browser.</p>
|
|
<i class="simple-svg" data-icon="noto-clap" style="width: auto;"></i>
|
|
<i class="simple-svg" data-icon="zmdi-attachment-alt" style="width: auto;"></i>
|
|
<i class="fa fa-cc-jcb" style="width: auto;"></i>
|
|
</li>
|
|
<li><span>width="auto" or height="auto" (or data-width or data-height)</span>
|
|
<p class="explain">This will behave differently than you would expect.</p>
|
|
<p class="explain">Using width="auto" or height="auto" will set dimensions of icon to dimensions SVG icon was designed with. "auto" is a special keyword in SimpleSVG parser, it is applied only when used in width, height, data-width or data-height attribute.</p>
|
|
<i class="simple-svg" data-icon="noto-clap" width="auto"></i>
|
|
<i class="simple-svg" data-icon="zmdi-attachment-alt" width="auto"></i>
|
|
<i class="fa fa-cc-jcb" width="auto"></i>
|
|
</li>
|
|
</ul>
|
|
<p>Best way to set dimensions for SVG? Either use both width and height or use (data-)height attribute.</p>
|
|
<p>NEVER set width to auto in CSS, it will mess up layout in Internet Explorer.</p>
|
|
</div>
|
|
<script src="../dist/simple-svg.js"></script>
|
|
<script src="../src/browser/plugins/fa.js"></script>
|
|
</body>
|
|
</html> |