3 ways to use svg icons in webprojects
TRANSCRIPT
www.comsolit.com
SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars MessmerSVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer
www.comsolit.com
3 ways to use SVG Icons in Webprojects
1
SVG Icons
www.comsolit.com
SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer
● Scalable Vector Graphics● XML Structure● Objects accessible through classes or ID’s● Changeable like every other HTML Element (with JavaScript)
2
What is SVG?
www.comsolit.com
SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer
The SVG Icon
● Make your own Icons with Adobe Illustrator● Or use Icons from Good Icons Sources
https://material.io/icons/https://useiconic.com/open
3
www.comsolit.com
SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer
1. SVG Icons with IMAGE Tag
<img src=”images/icon.svg” class=”icon”>
● Insert icon with <img> tag in content● Style color and size of icons at different position with CSS● Common use: Logos or grafics● Single requests for every icon
4
www.comsolit.com
SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer
2. SVG Icon MAP in HTML content
● We load the whole SVG Map into the <body>● Insert the icon with <svg> and <use> in content● No single requests for the different icons ● Style a icons at different position in another color and size
5
www.comsolit.com
SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer
Managing Icons
available-icons.json
{"general-link": "Link","page-news": "News" "material-action-info-24": "Info","material-communication-email-24": "Email"
}
6
www.comsolit.com
SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer
The Grunt Task
grunt.loadNpmTasks('grunt-svg-sprite');
svg_map: function() {var iconsFolderPath = 'web/Frontend/icons/';var availableIcons = grunt.file.readJSON(iconsFolderPath + 'available-icons.json');
return {minimal: {
src: Object.keys(availableIcons).map(function(icon) {var iconName, path;…
More Infos and Use of Library at: https://www.npmjs.com/package/grunt-svg-sprite
7
www.comsolit.com
SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer
Add SVG MAP to HTML Body
$.get('/Frontend/icons/svg-map.svg', function(response) {var div = document.createElement('div');div.style.display = 'none';div.innerHTML = new XMLSerializer().serializeToString(response.documentElement);
$('body').append(div);});
<div style="display: none;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 24 24" id="extensions-facebook"><path d="M17 2v4h-2c-.69 0-1 .81-1 1.5V10h3v4h-3v8h-4v-8H7v-4h3V6a4 4 0 0 1 4-4h3z"></path></symbol><symbol viewBox="0 0 24 24" id="extensions-gender_female"><path d="M12 4a6 6 0 0 1 6 6c0 2.97-2.16 5.44-5 5.92V18h2v2h-2v2h-2v-2H9v-2h2v-2.08c-2.84-.48-5-2.95-5-5.92a6 6 0 0 1 6-6m0 2a4 4 0 0 0-4 4 4 ...
8
www.comsolit.com
SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer
Positioning SVG Icon in content
<span class="icon"><svg viewBox="0 0 100 100">
<use xlink:href="#cross"/></svg>
</span>
9
www.comsolit.com
SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer
3. SVG Icons in external Map File
● Use external SVG-Map● Insert Icon with <svg><use> in code● Use Hash for externet SVG-Map File Version (Browser caching issue)● Use SVG 4 Everybody for Crossbrowser
10
www.comsolit.com
SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer
Insert Icon in HTML
<comsolit-icon icon="content-create-24" class="ng-isolate-scope ng-scope"><svg class="content-create-24">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/Icons/map.symbol.svg?1480415120#content-create-24"></use>
</svg></comsolit-icon>
We use our own AngularJS directive
11
www.comsolit.com
SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer
Cross Browser issue
External SVG MAP is not Crossbrowser valid
Use SVG 4 Everybody● Crossbrowser down to IE 6● Fallback with Image Files
https://github.com/jonathantneal/svg4everybody
12
www.comsolit.com
SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer
Icon Styling
● Multicolor● With CSS
13
www.comsolit.com
SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.7 36.7"><title>Cross</title>
<path d="M18.3,0A18.35,18.35,0,1,0,36.7,18.3,18.35,18.35,0,0,0,18.3,0Z" transform="translate(0 0)" fill="currentColor"/><path class="cls-1" d="M29.8,22.5H22.5v7.3H14.3V22.5H7V14.3h7.3V7h8.2v7.3h7.3Z" transform="translate(0 0)"/></svg>
Edit the XML and add the fill attribute
14
The XML
www.comsolit.com
SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer
Styling with CSS
header {.icon {
svg {fill: white; color: blue; //(Layer defined as currentColor)height: 25px;width: 25px;
}}
}
15
www.comsolit.com
SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer
16
www.comsolit.com
SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer
we are hiring!web-developer
AngularJS, Symfony, TYPO3, Magento
17
www.comsolit.com
SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer
thx
18