SVG Sprite
Alle (SVG) Images in einer CSS Datei.
Die Ausgangslage
Wärend des Besuchs einer Website werden in der Regel einige bis viele Bilddateien geladen. Bei einer Standard-Einbindung von Bildern werden diese einzeln und meist asynchron geladen.
Dies verursacht entsprechend viele Anfragen des Browser an den Server und Antworten des Servers zurück an den Browser, genannt HTTP Request/Response, die für die Gesamtzeit eines Ladevorgangs mitverantwortlich sind.
(Mit fortschreitender Einführung von HTTP/2 könnte sich dieser Umstand in Zukunft allerdings deutlich verbessern.)
Klassische Optimierungs-Möglichkeiten
um möglichst nur 1 einzelnen HTTP Request für alle statischen Bilder (wie Hintergründe, Icons, Logos, Hover-Zustände, etc.) zu benötigen:
- Image Sprite: alle Bilder in einem einzigen großen Image Datei.
(Veraltet und lässt sich nicht auf SVG anwenden) - Bilder in base64 encoden (und z.B. direkt im HTML Quellcode mitschicken)
- Webfont Icons
Base64 in CSS einbinden
In base64 konvertierte Bilder (auch und vor allem SVG Grafiken), lassen sich in CSS wiedergeben und somit zusammenfassen. Eine CSS Datei – diverse Images:
/*sprite.css*/ .icon-phone-mob { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yLDIwYzAsOS45NDEsOC4wNTksMTgsMTgsMThzMTgtOC4wNTksMTgtMThjMC05Ljk0MS04LjA1OS0xOC0xOC0xOFMyLDEwLjA1OSwyLDIwTDIsMjB6IE0wLDIwQzAsOC45NTQsOC45NTQsMCwyMCwwczIwLDguOTU0LDIwLDIwcy04Ljk1NCwyMC0yMCwyMFMwLDMxLjA0NiwwLDIwTDAsMjB6IE0yMi42MjksMTEuODg2bDAuNTcyLTEuODI5YzIuMjg1LDAuNjg2LDQuMzQyLDIuMjg2LDUuNTQzLDQuNTcxYzEuMjU2LDIuMjg2LDEuNDI4LDQuODU3LDAuNzQyLDcuMTQzbC0xLjc3Mi0wLjUxNGMwLjUxNS0xLjg4NywwLjM5OS0zLjk0NC0wLjU3MS01Ljc3MkMyNi4xMTQsMTMuNjU3LDI0LjUxNCwxMi40LDIyLjYyOSwxMS44ODZMMjIuNjI5LDExLjg4NnogTTIxLjcxNSwxNC45MTRsMC41MTQtMS43MTRjMS41NDMsMC40NTgsMi44NTcsMS40ODYsMy42NTgsMi45NzJjMC44NTYsMS40ODYsMC45NzEsMy4xNDMsMC41MTQsNC42ODZsLTEuNzcxLTAuNTE2YzAuMzQ0LTEuMDg1LDAuMjI5LTIuMjg1LTAuMzQyLTMuMzEzQzIzLjcxNSwxNS45NDMsMjIuODAxLDE1LjI1NywyMS43MTUsMTQuOTE0TDIxLjcxNSwxNC45MTR6IE0yMC41MTUsMTkuMDg2bDAuODU2LTIuODU4YzAuNjg2LDAuMjI5LDEuMzcxLDAuNzQzLDEuNzE2LDEuNDI5YzAuMzk5LDAuNzQzLDAuNDU2LDEuNTQyLDAuMjI4LDIuMjg2TDIwLjUxNSwxOS4wODZMMjAuNTE1LDE5LjA4NnogTTIzLjU0MywzMS4xOTljLTEuNDg2LDAuNjg3LTQuOTcxLDIuNjg2LTEwLjUxNC04LjRjLTUuNTQzLTExLjAyNy0xLjg4Ni0xMi43NDItMC41MTUtMTMuNDg0bDItMS4wMjlsMy4zMTUsNi42MjhsLTEuOTQzLDAuOTcyYy0yLjExNCwxLjE0MywyLjIyOSw5Ljc3MSw0LjM0Myw4LjY4NWMwLjExNSwwLDEuOTQzLTAuOTcxLDEuOTQzLTAuOTcxbDMuMzcxLDYuNTcyTDIzLjU0MywzMS4xOTlMMjMuNTQzLDMxLjE5OXoiLz48L3N2Zz4=); } .icon-mail-mob { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yLDIwYzAsOS45NDEsOC4wNTksMTgsMTgsMThjOS45NDEsMCwxOC04LjA1OSwxOC0xOGMwLTkuOTQxLTguMDU5LTE4LTE4LTE4QzEwLjA1OSwyLDIsMTAuMDU5LDIsMjBMMiwyMHogTTAsMjBDMCw4Ljk1NCw4Ljk1NCwwLDIwLDBzMjAsOC45NTQsMjAsMjBzLTguOTU0LDIwLTIwLDIwUzAsMzEuMDQ2LDAsMjBMMCwyMHogTTkuNzE0LDE1Ljc3MkwyMCw3Ljk0M2wxMC4yODUsNy44Mjl2MTIuNzQ0SDkuNzE0VjE1Ljc3Mkw5LjcxNCwxNS43NzJ6IE0yMCwxOS40ODZsLTcuMjU3LDcuMjU3aDE0LjQ1NkwyMCwxOS40ODZMMjAsMTkuNDg2eiBNMTUuNzE0LDIxLjI1OEwxMS40MjgsMTh2Ny41NDNMMTUuNzE0LDIxLjI1OEwxNS43MTQsMjEuMjU4eiBNMjcuOTQzLDE2LjI4NkwyMCwxMC4xNzJsLTgsNi4wNTdsNC45NzIsMy44MjlMMjAsMTcuMDI5bDMuMDI4LDMuMDI5TDI3Ljk0MywxNi4yODZMMjcuOTQzLDE2LjI4NnogTTI0LjIyOSwyMS4zMTVsNC4yODUsNC4yODVWMThMMjQuMjI5LDIxLjMxNUwyNC4yMjksMjEuMzE1eiIvPjwvc3ZnPg==); } .icon-xing-mob { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDIwQzAsOC45NTQsOC45NTMsMCwyMCwwczIwLDguOTU0LDIwLDIwcy04Ljk1MywyMC0yMCwyMFMwLDMxLjA0NiwwLDIwTDAsMjB6IE0yLDIwYzAsOS45NDEsOC4wNTksMTgsMTgsMThzMTgtOC4wNTksMTgtMThjMC05Ljk0MS04LjA1OS0xOC0xOC0xOFMyLDEwLjA1OSwyLDIwTDIsMjB6IE0xNS43ODcsMTVsMi41MzksMy45NEwxNC42NDMsMjVoLTQuMDk2bDMuNjg2LTYuMDQ2TDExLjY3LDE1SDE1Ljc4N0wxNS43ODcsMTV6IE0yMi40OCwzMGwtNC40MzgtOC4wNTVMMjQuNzcsMTBoNC4xMTFsLTYuNzI3LDExLjk0NUwyNi41NDcsMzBIMjIuNDhMMjIuNDgsMzB6Ii8+PC9zdmc+); } .icon-linkedin-mob { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yLDIwYzAsOS45NDEsOC4wNTksMTgsMTgsMThzMTgtOC4wNTksMTgtMThjMC05Ljk0MS04LjA1OS0xOC0xOC0xOFMyLDEwLjA1OSwyLDIwTDIsMjB6IE0wLDIwQzAsOC45NTQsOC45NTUsMCwyMCwwczIwLDguOTU0LDIwLDIwcy04Ljk1NSwyMC0yMCwyMFMwLDMxLjA0NiwwLDIwTDAsMjB6IE0xNS40OCwxMi4wNzVjMCwxLjA4NS0wLjg2OSwxLjk2NC0xLjk0NywxLjk2NHMtMS45NDktMC44NzctMS45NDktMS45NjRjMC0xLjA4NiwwLjg3MS0xLjk2NCwxLjk0OS0xLjk2NFMxNS40OCwxMC45OTEsMTUuNDgsMTIuMDc1TDE1LjQ4LDEyLjA3NXogTTIxLjMyOCwxNS45NzN2Mi4xM2MxLjY5OS0zLjE0OSw3Ljc5Ny0zLjM4Myw3Ljc5NywzLjAxN3Y2LjU0OEgyNS4yM1YyMi4wOWMwLTMuNjY2LTMuOTAyLTMuMzU1LTMuOTAyLDB2NS41NzdIMTcuNDNWMTUuOTczSDIxLjMyOEwyMS4zMjgsMTUuOTczeiBNMTUuNDgsMTUuOTczdjExLjY5NGgtMy44OTZWMTUuOTczSDE1LjQ4TDE1LjQ4LDE1Ljk3M3oiLz48L3N2Zz4=); }
SVG Sprite
Alle (SVG) Images in einer CSS Datei.
Wärend des Besuchs einer Website werden in der Regel einige bis viele Bilddateien geladen. Bei einer Standard-Einbindung von Bildern werden diese einzeln und meist asynchron geladen.
Dies verursacht viele Anfragen des Browser an den Server und entsprechende Antworten des Servers zurück an den Browser, genannt HTTP Request/Response, die für die Gesamtzeit eines Ladevorgangs mitverantwortlich sind.
(Mit fortschreitender Einführung von HTTP/2 könnte sich dieser Umstand in Zukunft allerdings deutlich verbessern.)
Klassische Optimierungs-Möglichkeiten
um möglichst nur 1 einzelnen HTTP Request für alle statischen Bilder (wie Hintergründe, Icons, Logos, Hover-Zustände, etc.) zu benötigen:
Eine alte und gängige Methode war, alle Bilder in einem einzigen großen Bild anzulegen und für jedes Element per CSS background-position zur entsprechenden Stelle zu rücken. Nicht wirklich schön und wirklich alt. Und es lässt sich nicht auf SVG anwenden.
Wärenddessen machte sich die zweite Idee breit, Bilder in base64 zu encoden, wodurch sie praktisch als Quellcode zur verfügung stehen und sich in eigene Datenpakete zusammenfassen lassen (z.B. direkt im HTML-Code).
Für Icons und Logos (fertig oder selbsterstellt) gibt es schon seit vielen Jahren diverse Webfont Lösungen, die pro Typo-Schnitt auch nur einen HTTP Request benötigen.
Base64 in CSS einbinden
In base64 konvertierte Bilder (auch und vor allem SVG Grafiken), lassen sich in CSS wiedergeben und somit zusammenfassen. Eine CSS Datei – diverse Images:
/*sprite.css*/ .icon-phone-mob { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yLDIwYzAsOS45NDEsOC4wNTksMTgsMTgsMThzMTgtOC4wNTksMTgtMThjMC05Ljk0MS04LjA1OS0xOC0xOC0xOFMyLDEwLjA1OSwyLDIwTDIsMjB6IE0wLDIwQzAsOC45NTQsOC45NTQsMCwyMCwwczIwLDguOTU0LDIwLDIwcy04Ljk1NCwyMC0yMCwyMFMwLDMxLjA0NiwwLDIwTDAsMjB6IE0yMi42MjksMTEuODg2bDAuNTcyLTEuODI5YzIuMjg1LDAuNjg2LDQuMzQyLDIuMjg2LDUuNTQzLDQuNTcxYzEuMjU2LDIuMjg2LDEuNDI4LDQuODU3LDAuNzQyLDcuMTQzbC0xLjc3Mi0wLjUxNGMwLjUxNS0xLjg4NywwLjM5OS0zLjk0NC0wLjU3MS01Ljc3MkMyNi4xMTQsMTMuNjU3LDI0LjUxNCwxMi40LDIyLjYyOSwxMS44ODZMMjIuNjI5LDExLjg4NnogTTIxLjcxNSwxNC45MTRsMC41MTQtMS43MTRjMS41NDMsMC40NTgsMi44NTcsMS40ODYsMy42NTgsMi45NzJjMC44NTYsMS40ODYsMC45NzEsMy4xNDMsMC41MTQsNC42ODZsLTEuNzcxLTAuNTE2YzAuMzQ0LTEuMDg1LDAuMjI5LTIuMjg1LTAuMzQyLTMuMzEzQzIzLjcxNSwxNS45NDMsMjIuODAxLDE1LjI1NywyMS43MTUsMTQuOTE0TDIxLjcxNSwxNC45MTR6IE0yMC41MTUsMTkuMDg2bDAuODU2LTIuODU4YzAuNjg2LDAuMjI5LDEuMzcxLDAuNzQzLDEuNzE2LDEuNDI5YzAuMzk5LDAuNzQzLDAuNDU2LDEuNTQyLDAuMjI4LDIuMjg2TDIwLjUxNSwxOS4wODZMMjAuNTE1LDE5LjA4NnogTTIzLjU0MywzMS4xOTljLTEuNDg2LDAuNjg3LTQuOTcxLDIuNjg2LTEwLjUxNC04LjRjLTUuNTQzLTExLjAyNy0xLjg4Ni0xMi43NDItMC41MTUtMTMuNDg0bDItMS4wMjlsMy4zMTUsNi42MjhsLTEuOTQzLDAuOTcyYy0yLjExNCwxLjE0MywyLjIyOSw5Ljc3MSw0LjM0Myw4LjY4NWMwLjExNSwwLDEuOTQzLTAuOTcxLDEuOTQzLTAuOTcxbDMuMzcxLDYuNTcyTDIzLjU0MywzMS4xOTlMMjMuNTQzLDMxLjE5OXoiLz48L3N2Zz4=); } .icon-mail-mob { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yLDIwYzAsOS45NDEsOC4wNTksMTgsMTgsMThjOS45NDEsMCwxOC04LjA1OSwxOC0xOGMwLTkuOTQxLTguMDU5LTE4LTE4LTE4QzEwLjA1OSwyLDIsMTAuMDU5LDIsMjBMMiwyMHogTTAsMjBDMCw4Ljk1NCw4Ljk1NCwwLDIwLDBzMjAsOC45NTQsMjAsMjBzLTguOTU0LDIwLTIwLDIwUzAsMzEuMDQ2LDAsMjBMMCwyMHogTTkuNzE0LDE1Ljc3MkwyMCw3Ljk0M2wxMC4yODUsNy44Mjl2MTIuNzQ0SDkuNzE0VjE1Ljc3Mkw5LjcxNCwxNS43NzJ6IE0yMCwxOS40ODZsLTcuMjU3LDcuMjU3aDE0LjQ1NkwyMCwxOS40ODZMMjAsMTkuNDg2eiBNMTUuNzE0LDIxLjI1OEwxMS40MjgsMTh2Ny41NDNMMTUuNzE0LDIxLjI1OEwxNS43MTQsMjEuMjU4eiBNMjcuOTQzLDE2LjI4NkwyMCwxMC4xNzJsLTgsNi4wNTdsNC45NzIsMy44MjlMMjAsMTcuMDI5bDMuMDI4LDMuMDI5TDI3Ljk0MywxNi4yODZMMjcuOTQzLDE2LjI4NnogTTI0LjIyOSwyMS4zMTVsNC4yODUsNC4yODVWMThMMjQuMjI5LDIxLjMxNUwyNC4yMjksMjEuMzE1eiIvPjwvc3ZnPg==); } .icon-xing-mob { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDIwQzAsOC45NTQsOC45NTMsMCwyMCwwczIwLDguOTU0LDIwLDIwcy04Ljk1MywyMC0yMCwyMFMwLDMxLjA0NiwwLDIwTDAsMjB6IE0yLDIwYzAsOS45NDEsOC4wNTksMTgsMTgsMThzMTgtOC4wNTksMTgtMThjMC05Ljk0MS04LjA1OS0xOC0xOC0xOFMyLDEwLjA1OSwyLDIwTDIsMjB6IE0xNS43ODcsMTVsMi41MzksMy45NEwxNC42NDMsMjVoLTQuMDk2bDMuNjg2LTYuMDQ2TDExLjY3LDE1SDE1Ljc4N0wxNS43ODcsMTV6IE0yMi40OCwzMGwtNC40MzgtOC4wNTVMMjQuNzcsMTBoNC4xMTFsLTYuNzI3LDExLjk0NUwyNi41NDcsMzBIMjIuNDhMMjIuNDgsMzB6Ii8+PC9zdmc+); } .icon-linkedin-mob { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yLDIwYzAsOS45NDEsOC4wNTksMTgsMTgsMThzMTgtOC4wNTksMTgtMThjMC05Ljk0MS04LjA1OS0xOC0xOC0xOFMyLDEwLjA1OSwyLDIwTDIsMjB6IE0wLDIwQzAsOC45NTQsOC45NTUsMCwyMCwwczIwLDguOTU0LDIwLDIwcy04Ljk1NSwyMC0yMCwyMFMwLDMxLjA0NiwwLDIwTDAsMjB6IE0xNS40OCwxMi4wNzVjMCwxLjA4NS0wLjg2OSwxLjk2NC0xLjk0NywxLjk2NHMtMS45NDktMC44NzctMS45NDktMS45NjRjMC0xLjA4NiwwLjg3MS0xLjk2NCwxLjk0OS0xLjk2NFMxNS40OCwxMC45OTEsMTUuNDgsMTIuMDc1TDE1LjQ4LDEyLjA3NXogTTIxLjMyOCwxNS45NzN2Mi4xM2MxLjY5OS0zLjE0OSw3Ljc5Ny0zLjM4Myw3Ljc5NywzLjAxN3Y2LjU0OEgyNS4yM1YyMi4wOWMwLTMuNjY2LTMuOTAyLTMuMzU1LTMuOTAyLDB2NS41NzdIMTcuNDNWMTUuOTczSDIxLjMyOEwyMS4zMjgsMTUuOTczeiBNMTUuNDgsMTUuOTczdjExLjY5NGgtMy44OTZWMTUuOTczSDE1LjQ4TDE1LjQ4LDE1Ljk3M3oiLz48L3N2Zz4=); }