-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added new HTML output format for rendering an inline SVG HTML
implementation (#1)
- Loading branch information
Showing
1 changed file
with
110 additions
and
1 deletion.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=Edge"> | ||
| <script src="https://rawgit.com/jonathantneal/svg4everybody/master/svg4everybody.js"></script> | ||
| <title>SVG sprite preview | svg-sprite</title> | ||
| <style>@charset "UTF-8";body{padding:0;margin:0;color:#666;background:#fafafa;font-family:Arial,Helvetica,sans-serif;font-size:1em;line-height:1.4}header{display:block;padding:3em 3em 2em 3em;background-color:#fff}header p{margin:2em 0 0 0}section{border-top:1px solid #eee;padding:2em 3em 0 3em}section ul{margin:0;padding:0}section li{display:inline;display:inline-block;background-color:#fff;position:relative;margin:0 2em 2em 0;vertical-align:top;border:1px solid #ccc;padding:1em 1em 3em 1em;cursor:default}.icon-box{margin:0;width:144px;height:144px;position:relative;background:#ccc url(data:image/gif;base64,R0lGODlhDAAMAIAAAMzMzP///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozQjk4OTI0MUY5NTIxMUUyQkJDMEI5NEFEM0Y1QTYwQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozQjk4OTI0MkY5NTIxMUUyQkJDMEI5NEFEM0Y1QTYwQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNCOTg5MjNGRjk1MjExRTJCQkMwQjk0QUQzRjVBNjBDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNCOTg5MjQwRjk1MjExRTJCQkMwQjk0QUQzRjVBNjBDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAAAwADAAAAhaEH6mHmmzcgzJAUG/NVGrfOZ8YLlABADs=) top left repeat;border:1px solid #ccc;display:table-cell;vertical-align:middle;text-align:center}.icon{display:inline;display:inline-block}h1{margin-top:0}h2{margin:0;padding:0;font-size:1em;font-weight:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:absolute;left:1em;right:1em;bottom:1em}footer{display:block;margin:0;padding:0 3em 3em 3em}footer p{margin:0;font-size:.7em}footer a{color:#0f7595;margin-left:0}</style> | ||
|
|
||
| <!-- | ||
| Sprite image dimensions | ||
| ==================================================================================================== | ||
| You will need to set the sprite image dimensions via CSS when you use them as inline SVG, otherwise | ||
| they would become a huge 100% in size. You may use the following dimension classes for doing so. | ||
| They might well be outsourced to an external stylesheet of course. | ||
| --> | ||
| <style type="text/css"> | ||
| {{#svg}}{{#dimensions}} {{#selector}}{{#last}}.{{expression}}{{/last}}{{/selector}} { width: {{width}}px; height: {{height}}px; }{{/dimensions}} | ||
| {{/svg}}</style> | ||
| <!-- | ||
| ==================================================================================================== | ||
| --> | ||
|
|
||
| </head> | ||
| <body> | ||
|
|
||
| <!-- | ||
| Inline SVG sprite | ||
| ==================================================================================================== | ||
| This is an inlined version of the generated SVG sprite. The single images may be <use>d everywhere | ||
| below within this document. Please see https://github.com/jkphl/svg-sprite#inline-embedding for | ||
| further details on how to create this embeddable sprite variant. | ||
| --> | ||
| {{> inline}} | ||
| <!-- | ||
| ==================================================================================================== | ||
| --> | ||
|
|
||
| <header> | ||
| <h1>SVG sprite preview</h1> | ||
| <p>This preview features two methods of using the generated sprite in conjunction with inline SVG. Please have a look at the HTML source for further details and be aware of the following constraints:</p> | ||
| <ul> | ||
| <li>Your browser has to <a href="http://caniuse.com/svg-html5" target="_blank">support inline SVG</a> for these techniques to work.</li> | ||
| <li>The embedded sprite (A) slightly differs from the generated external one. Please <a href="https://github.com/jkphl/svg-sprite#inline-embedding" target="_blank">see the documentation</a> for details on how to create such an embeddable sprite.</li> | ||
| <li>Internet Explorer up to version 11 doesn't support external sprites for use with inline SVG. For IE 9-11, you may polyfill this functionality with <a href="https://github.com/jonathantneal/svg4everybody" target="_blank">SVG for Everybody</a>.</li> | ||
| </ul> | ||
| </header> | ||
| <section> | ||
|
|
||
| <!-- | ||
| Inline SVG with embedded sprite | ||
| ==================================================================================================== | ||
| These SVG images make use of fragment identifiers (IDs) and are extracted out of the inline sprite | ||
| embedded above. They may be styled via CSS. | ||
| --> | ||
| <h3>A) Inline SVG with embedded sprite</h3> | ||
| <ul> | ||
|
|
||
| {{#svg}} <li title="{{name}}"> | ||
| <div class="icon-box"> | ||
|
|
||
| <!-- {{name}} --> | ||
| <svg viewBox="{{#invert}}-{{positionX}}{{/invert}} {{#invert}}{{positionY}}{{/invert}} {{width}} {{height}}" class="{{#common}}{{prefix}} {{/common}}{{#selector}}{{#first}}{{raw}}{{/first}}{{/selector}} {{#dimensions}}{{#selector}}{{#last}}{{raw}}{{/last}}{{/selector}}{{/dimensions}}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | ||
| <use xlink:href="#{{name}}"></use> | ||
| </svg> | ||
|
|
||
| </div> | ||
| <h2>{{name}}</h2> | ||
| </li> | ||
| {{/svg}} </ul> | ||
| <!-- | ||
| ==================================================================================================== | ||
| --> | ||
|
|
||
| <!-- | ||
| Inline SVG with external sprite | ||
| ==================================================================================================== | ||
| These SVG images make use of an URL + fragment identifiers (IDs) and refer to the regular external | ||
| SVG sprite. They may be styled via CSS. (IE 9-11 with polyfill only) | ||
| --> | ||
| <h3>B) Inline SVG with external sprite (IE 9-11 with polyfill only)</h3> | ||
| <ul> | ||
|
|
||
| {{#svg}} <li title="{{name}}"> | ||
| <div class="icon-box"> | ||
|
|
||
| <!-- {{name}} --> | ||
| <svg viewBox="{{#invert}}-{{positionX}}{{/invert}} {{#invert}}{{positionY}}{{/invert}} {{width}} {{height}}" class="{{#common}}{{prefix}} {{/common}}{{#selector}}{{#first}}{{raw}}{{/first}}{{/selector}} {{#dimensions}}{{#selector}}{{#last}}{{raw}}{{/last}}{{/selector}}{{/dimensions}}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | ||
| <use xlink:href="{{{sprite}}}#{{name}}"></use> | ||
| </svg> | ||
|
|
||
| </div> | ||
| <h2>{{name}}</h2> | ||
| </li> | ||
| {{/svg}} </ul> | ||
| <!-- | ||
| ==================================================================================================== | ||
| --> | ||
| </section> | ||
| <footer> | ||
| <p>Generated at {{date}} by <a href="https://github.com/jkphl/svg-sprite" target="_blank">svg-sprite</a>.</p> | ||
| </footer> | ||
| </body> | ||
| </html> |