CSS - unwanted spacing between letters from SVG logo - html
I've been working on a website for a while and now I'm trying to make it responsive. When I open it from my phone, the letters from the logo are getting distanced.
Logo on PC:
Photo
Logo on Phone:
Photo
Does anyone know why is this happening? Thanks in advance.
Edit:
HTML:
<img src = "resources/blue-logo.svg" class = "logo">
CSS:
.logo{
max-width: 100%;
width: 16em;
padding: 15px 0px 15px 20px;
letter-spacing: normal;
}
The problem was in svg coordinates:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 812.55 182.53"><defs><style>.cls-1{font-size:76.08px;font-family:Montserrat-Bold, Montserrat;font-weight:700;}.cls-1,.cls-8{fill:#231f20;}.cls-2{letter-spacing:0em;}.cls-3{letter-spacing:0em;}.cls-4{letter-spacing:0em;}.cls-5,.cls-6,.cls-7{fill:#00aeef;}.cls-5{letter-spacing:0em;}.cls-7{letter-spacing:-0.02em;}</style></defs><text class="cls-1" transform="translate(0 162.29)"><tspan class="cls-2">E</tspan><tspan x="50.74" y="0">ddi</tspan><tspan class="cls-3" x="158.93" y="0">e</tspan>
<tspan class="cls-4" x="190.01" y="0">’</tspan><tspan x="207.57" y="0">s </tspan><tspan class="cls-5" x="260.5" y="0">Cus</tspan>
<tspan class="cls-7" x="385.86" y="0">toms</tspan></text>
Your phone screenshot clearly indicates, that your font is not loaded/available.
You could actually add a stylesheet to your svg defs to load the google font Montserrat directly.
<defs>
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Montserrat:700');
</style>
</defs>
But I strongly recommend embedding the font using
the vecta.io/nano svg optimizer
Nano optimizer will also subset your font, the embedded font just includes the actually used glyphs/characters – resulting in much smaller file sizes than embedding a complete glyphset (~9 KB):
Your svg would have this code:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 812.55 182.53" xmlns:v="https://vecta.io/nano"><defs><style>#font-face{font-family:"CustomFont";src:url(data:application/font-woff;charset=utf-8;base64,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) format("woff"); font-weight:bold;font-style:normal;}</style></defs><style><![CDATA[.B{letter-spacing:0em}.C{letter-spacing:0em}.D{letter-spacing:0em}.E{letter-spacing:0em}.G{letter-spacing:-0.02em}]]></style><text transform="translate(0 162.29)" font-size="76.08" font-family="CustomFont" font-weight="700" fill="#231f20"><tspan class="B">E</tspan><tspan x="50.74" y="0">ddi</tspan><tspan class="C" x="178.93" y="0">e</tspan><tspan class="D" x="227.01" y="0">’</tspan><tspan x="245.57" y="0">s </tspan><tspan class="E" x="307.5" fill="#00aeef" y="0">C</tspan><tspan x="362.2" fill="#00aeef" y="0">us</tspan><tspan class="G" x="454.86" fill="#00aeef" y="0">t</tspan><tspan x="486.66" fill="#00aeef" y="0">oms</tspan></text><g fill="#231f20"><circle cx="627.19" cy="33.72" r="4.65"/><circle cx="622.54" cy="48.25" r="4.65"/><circle cx="607.42" cy="51.74" r="4.65"/><circle cx="618.47" cy="62.79" r="4.65"/><circle cx="596.96" cy="41.28" r="4.65"/><circle cx="611.49" cy="37.21" r="4.65"/><path d="M641.72 51.75a36.72 36.72 0 0 0 8.74 26.16L640 88.37l6.46 6.46 11.24-11.24 2.13-2.13-.07-.06 52.89-52.88.06.07 7-7-.06-.06 5.81-5.82-6.4-7-9.3 9.31c-13.763-11.218-33.373-11.699-47.67-1.17L645.23-.01l-12.77 12.8 16.86 16.86a37.57 37.57 0 0 0-7.6 22.1zm9.3.58a35.75 35.75 0 0 1 10.44-22.68c6.39-6.39 14.53-10.46 22.67-10.46a26.1 26.1 0 0 1 18.61 5.23l-45.93 45.93c-4.04-5.23-6.35-11.63-5.79-18.02z"/></g><path d="M800.03 101.2L720.1 21.27l-7 7 79.93 79.93zm-66.11 66.12h0l6.23-6.23-79.93-79.93-6.39 6.36 79.93 80z" fill="#00aeef"/><path d="M747.54 152.28l-7.2 7.2-1.18 1.18-.73.73-1.1 1.1-11.26 11.26 6.83 6.83 79.65-79.65-7.36-6.3z" fill="#231f20"/></svg>
However, when it comes to logos, I still recommend converting your text to paths in your graphic application (Adobe Ai, inscape, figma etc.).
It is still the most reliable technique.
Albeit svg <text> elements offer some benefits concerning accessibility – something like a <title> element or some aria-attributes added the svg would also to the trick.
Related
I don't understand SVG scaling. Svg is not it's full canvas width and height
I want this svg to be 69px width and height. But it's not scaling or I don't understand viewbox. picture is here I understand that width and height applies to rect, path etc and viewbox is the canvas in which the svg is inside. AS you can see from the code snippet below. The svg is 69px, but the logo inside sticks to the top left corner, but I want it to be as wide an tall as possible: 69px <svg width="69" height="69" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M10.4415 6.28449C10.4415 7.10822 10.4463 7.93207 10.4381 8.75576C10.4361 8.95977 10.5112 9.03203 10.713 9.02471C11.0684 9.01173 11.4277 9.0434 11.7797 9.00514C12.7047 8.90464 13.4368 8.49129 13.8053 7.60841C14.1704 6.73343 14.1651 5.83436 13.8403 4.94898C13.5425 4.1373 12.8973 3.74903 12.0656 3.6199C11.6197 3.55068 11.1704 3.58806 10.7227 3.58223C10.4551 3.57876 10.4422 3.59445 10.4418 3.85541C10.4407 4.6651 10.4414 5.47479 10.4415 6.28449ZM5.98329 6.20077C5.98329 4.89727 5.98184 3.59381 5.98462 2.29031C5.98513 2.06529 6.00176 1.84022 6.01377 1.61529C6.05083 0.922079 6.61303 0.369839 7.27299 0.263374C7.46967 0.23162 7.66715 0.213693 7.86776 0.214073C9.54884 0.216906 11.2301 0.20215 12.911 0.219655C14.2466 0.233565 15.4895 0.594481 16.5741 1.3772C17.6351 2.14283 18.2553 3.20655 18.4851 4.47521C18.7648 6.01934 18.7748 7.55987 18.2195 9.0582C17.6923 10.4806 16.6843 11.4255 15.2541 11.9599C14.3371 12.3026 13.3866 12.3915 12.4238 12.4004C10.9636 12.4138 9.50323 12.408 8.04298 12.4028C7.47219 12.4007 6.95239 12.2657 6.52485 11.8465C6.11906 11.4488 5.97962 10.9621 5.97598 10.4283C5.96645 9.01918 5.97274 7.60993 5.97274 6.20077H5.98329Z" fill="black"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M4.62759 7.66138C4.57612 8.67961 4.61447 9.66663 4.57702 10.6511C4.53697 11.7049 3.84084 12.5047 2.67921 12.5854C2.10363 12.6254 1.54002 12.6071 1.01745 12.3268C0.417807 12.005 0.115548 11.4857 0.0332615 10.8337C-0.0233346 10.3855 0.0103495 9.93313 0.00808393 9.48266C0.00295437 8.47551 0.00739998 7.46837 2.34042e-05 6.46122C-0.00136301 6.26698 0.0585673 6.15704 0.254303 6.0836C1.23221 5.71668 2.20494 5.33615 3.17828 4.9573C3.56209 4.80792 3.94194 4.64865 4.32499 4.49732C4.60865 4.38519 4.62703 4.39787 4.62729 4.69385C4.62806 5.69398 4.62759 6.69406 4.62759 7.66138Z" fill="black"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M0.0324214 3.16745C0.0566586 2.70299 -0.0246875 2.12373 0.113853 1.55369C0.343614 0.608484 1.10364 0.0115526 2.08552 0.000855396C2.5353 -0.00404927 2.97858 0.00707082 3.40737 0.172054C4.10045 0.438639 4.6214 1.16368 4.63196 1.90255C4.63538 2.14191 4.61777 2.38254 4.63705 2.62041C4.6553 2.84581 4.56994 2.95562 4.35638 3.03722C3.11665 3.51082 1.88252 3.99879 0.646386 4.4816C0.50092 4.53843 0.352762 4.58887 0.209434 4.65044C0.0699954 4.71035 0.0308826 4.65496 0.0316092 4.52393C0.0338321 4.10851 0.0324214 3.6931 0.0324214 3.16745Z" fill="black"/> </svg>
My suggestion is to use an external editor (like https://jakearchibald.github.io/svgomg/), as there would be too many changes to be made within path and d.
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 69 69" style="enable-background:new 0 0 69 69;width: 69px;height: 69px;" xml:space="preserve">
<style type="text/css">
.st0{fill-rule:evenodd;clip-rule:evenodd;}
</style>
<path class="st0" d="M38.6,34.4c0,3,0,6.1,0,9.1c0,0.8,0.3,1,1,1c1.3,0,2.6,0.1,3.9-0.1c3.4-0.4,6.1-1.9,7.5-5.2
c1.3-3.2,1.3-6.6,0.1-9.8c-1.1-3-3.5-4.4-6.6-4.9c-1.6-0.3-3.3-0.1-5-0.1c-1,0-1,0-1,1C38.6,28.5,38.6,31.4,38.6,34.4z M22.1,34.1
c0-4.8,0-9.6,0-14.4c0-0.8,0.1-1.7,0.1-2.5c0.1-2.6,2.2-4.6,4.7-5c0.7-0.1,1.5-0.2,2.2-0.2c6.2,0,12.4,0,18.6,0
c4.9,0.1,9.5,1.4,13.5,4.3c3.9,2.8,6.2,6.8,7.1,11.4c1,5.7,1.1,11.4-1,16.9c-1.9,5.3-5.7,8.7-11,10.7C53,56.7,49.5,57,45.9,57
c-5.4,0-10.8,0-16.2,0c-2.1,0-4-0.5-5.6-2.1c-1.5-1.5-2-3.3-2-5.2C22,44.5,22.1,39.3,22.1,34.1L22.1,34.1z"/>
<path class="st0" d="M17.1,39.5c-0.2,3.8,0,7.4-0.2,11c-0.1,3.9-2.7,6.8-7,7.1c-2.1,0.1-4.2,0.1-6.1-1c-2.2-1.2-3.3-3.1-3.6-5.5
c-0.2-1.7-0.1-3.3-0.1-5c0-3.7,0-7.4,0-11.2c0-0.7,0.2-1.1,0.9-1.4c3.6-1.4,7.2-2.8,10.8-4.2c1.4-0.6,2.8-1.1,4.2-1.7
c1-0.4,1.1-0.4,1.1,0.7C17.1,32.3,17.1,36,17.1,39.5z"/>
<path class="st0" d="M0.1,22.9c0.1-1.7-0.2-3.9,0.3-6c0.8-3.5,3.7-5.7,7.3-5.7c1.7,0,3.3,0,4.9,0.6c2.6,1,4.5,3.7,4.5,6.4
c0,0.9-0.1,1.8,0,2.7c0.1,0.8-0.2,1.2-1,1.5C11.5,24.2,7,26,2.4,27.8c-0.5,0.2-1.1,0.4-1.6,0.6c-0.5,0.2-0.7,0-0.7-0.5
C0.1,26.4,0.1,24.9,0.1,22.9z"/>
</svg>
Basically the changes to width and height (to 68px) only apply to the canvas but the content is inside path so you should, point by point, move the image.
It is doable but it is hard work, I prefer to help myself with external editors.
i was having issues with svg scaling also recently. What i found helpful was this post by css-tricks. I will attach the link here: https://css-tricks.com/scale-svg/ i hope this brings more clarity to your issue :) edit: playing around with the svg you provided i changed the aspect ratio and viewbox to fit in the svg (making it 'scale' to the wanted width, with reduced height in order to preserve its aspect ratio without distorting or cutting the svg). here is what i changed: <svg width="69" height="49" viewBox="0 -2 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
Icon font with multi-color SVG icons
We are trying to create an icon font for our custom multi-color icons. Icomoon worked like a charm for our UI icons (mono-color) but with multi-color icons, multiple lines are required to use an icon (look at the example below). Is there any way to achieve a similar behavior as the mono-colors but for multi-color SVG icons? ex mono-color icon: <span class="icon-name"> multi-color icon: <span class="icon-name"> <span class="path1"> <span class="path2"> <span class="path3"> <span class="path4"> <span class="path5"> <span class="path6"> <span class="path7"> <span class="path8"> </span>
If I understand that correctly, you are struggling with colouring svgs. The svg code can contain a fill element (https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_circle for reference). Moreover, you could try to change the color by using CSS (color property).
If you need to use an icon font (instead of inlined svgs) you can't circumvent placing multiple glyphs/elements for each color.
To some extend you might achieve a multicolored text display with Opentype SVG fonts.
Unfortunately browser support is quite limited:
Photoshop, version CC 2017 and above
Illustrator
Firefox, version 32 and above
Microsoft Edge, Windows 10 Anniversary Edition and above
In Windows 10, the DirectWrite and Direct2D platform components allow OpenType-SVG support in any apps that use those APIs
Besides converting svgs to such a font file will require more sophisticated font editors or at least more experience in font file generating/editing.
So using icon svgs directly is certainly more straightforward.
You can achieve a quite font-like behaviour e.g by:
combining multiple icons in a single svg using <defs> or <symbol>
using keyword based fill properties like "currentColor" to color icons via text color
using css-variables to define reusable color themes
Example: inlined svg icons
let iconInserts = document.querySelectorAll(".icon-insert");
let iconDefs = document.querySelector(".iconDefs");
if (iconInserts.length) {
iconInserts.forEach(function (iconSpan) {
let iconName = iconSpan.getAttribute("data-icon");
let symbolHref = "#" + iconName;
let iconDef = iconDefs.querySelector(symbolHref);
let viewBox = iconDef.getAttribute("viewBox");
// insert
let iconSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg");
iconSVG.classList.add("svg-inline");
iconSVG.setAttribute("viewBox", viewBox);
let iconUse = document.createElementNS("http://www.w3.org/2000/svg", "use");
iconSVG.appendChild(iconUse);
iconSpan.appendChild(iconSVG);
iconUse.setAttribute("href", symbolHref);
iconUse.classList.add(iconName);
});
}
body{
font-size:15vmin;
}
.svg-inline{
display:inline-block;
height:1em;
transform:translateY(20%);
}
.theme1{
--col1:green;
--col2:pink;
--col3:purple;
--col4:orange;
--col5:lime;
--col6:cyan;
--col7:#444;
}
.theme2{
--col1:green;
--col2:green;
--col3:green;
--col4:orange;
--col5:orange;
--col6:orange;
--col7:green;
}
.icon-news{
--col1:green;
--col2:pink;
--col3:purple;
--col4:orange;
--col5:lime;
--col6:cyan;
--col7:#444;
}
<p>
<svg class="svg-inline theme1" viewBox="0 0 1000 1000">
<use href="#icon-news" />
</svg>
Sample icon (colored by css vars)
<svg class="svg-inline theme2" viewBox="0 0 1000 1000">
<use href="#icon-news" />
</svg>
Sample icon 2 (colored by css vars)
<svg class="svg-inline" viewBox="0 0 1000 1000" style="color:orange">
<use href="#icon-news2" />
</svg>
Sample icon 3 (colored by currentColor)
<span class="icon-insert" data-icon="icon-news"></span>
Sample icon 4 (injected by js)
</p>
<!-- icon library in hidden svg file -->
<svg class="iconDefs" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" style="display:none">
<symbol id="icon-news" viewBox="0 0 1000 1000">
<path fill="var(--col1)" id="p6" d="M251 658h313v62H251z" />
<path fill="var(--col2)" id="p5" d="M626 658h252v62H626z" />
<path fill="var(--col3)" id="p4" d="M626 531h252v63H626z" />
<path fill="var(--col4)" id="p3" d="M626 406h252v63H626z" />
<path fill="var(--col5)" id="p2" d="M626 282h252v62H626z" />
<path fill="var(--col6)" id="p1" d="M501 344v187H314V344h187zm63-62H251v312h313V282z" />
<path fill="var(--col7)" id="bg" d="M1003 155H125v64H-1v533c0 52 43 94 94 94h817c51 0 93-42 93-94V155zM125 752c0 17-14 31-32 31-17 0-31-14-31-31V282h63v470zm816 0c0 17-14 31-31 31H182c4-10 6-21 6-31V219h753v533z" />
</symbol>
<symbol id="icon-news2" viewBox="0 0 1000 1000">
<path fill="currentColor" id="p1" d="M501 344v187H314V344h187zm63-62H251v312h313V282z" />
<path fill="currentColor" id="bg" d="M1003 155H125v64H-1v533c0 52 43 94 94 94h817c51 0 93-42 93-94V155zM125 752c0 17-14 31-32 31-17 0-31-14-31-31V282h63v470zm816 0c0 17-14 31-31 31H182c4-10 6-21 6-31V219h753v533z" />
</symbol>
</svg>
You might also write a simple icon insertion script injecting placeholder span elements by svg instances (4. example)
<span class="icon-insert" data-icon="icon-news"></span>
could be replaced by something like this:
<span class="icon-insert" data-icon="icon-news">
<svg class="svg-inline" viewBox="0 0 1000 1000">
<use href="#icon-news" class="icon-news" />
</svg>
</span>
Some icon libraries also provide a similar js based injection approach (e.g feather icons)
See also: css-tricks: Inline SVG vs Icon Fonts [CAGEMATCH]
Stretching a complex SVG based on text within it
So I made an Illustrator SVG to work as a background of headers in a website I am designing. I am trying to find a way to dynamically resize this background SVG based on the text that is inside it. I have already used lengthAdjust="spacingAndGlyphs", however, some of the text that I input into it becomes rather squished if it is a longer line, and rather stretched if it is a shorter line of text. I have Googled for solutions for hours to no avail (I may have found a few solutions on other stack overflow pages, however, I cannot seem to get them to work in my case. Then again, I am new to svg in html pages, so maybe it is just my ignorance that is preventing me from understanding them). I am also open to other solutions that do not involve SVGs. Here it is, please let me know if you have any questions. I also made a CodePen project if you wish to mess around with the code: https://codepen.io/jZ00codeR/pen/VgywKJ
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 431.31 58.47" style="enable-background:new 0 0 431.31 58.47;" xml:space="preserve">
<style type="text/css">
.st0{fill:#005FB3;}
.st1{fill:none;}
.st2{fill:#FFFFFF;}
.st3{font-family:'neue-aachen-pro';font-weight:600;}
.st4{font-size:40.8839px;}
.st5{letter-spacing:-1;}
</style>
<g>
<path class="st0" d="M431.31,58.47L431.31,58.47c-143.6-9.99-287.71-9.99-431.31,0l0,0l19.76-17.44c10.02-7.32,10.02-16.27,0-23.59
L0,0l0,0c143.6,9.99,287.71,9.99,431.31,0l0,0l-19.76,17.44c-10.02,7.32-10.02,16.27,0,23.59L431.31,58.47z"/>
<rect x="27.04" y="6.33" class="st1" width="377.23" height="45.81"/>
<text transform="matrix(1 0 0 1 40.04 40.407)" class="st2 st3 st4 st5 changeHead" textLength="351.23" lengthAdjust="spacingAndGlyphs">This is the text that is getting squished.</text>
</g>
</svg>
I've made a few changes. The text is now centered around the center of the svg element.
I'm using javascript to calculate the length of the text and resize the text if it's wider than 350units. You may decide this maxim value of 350 in base of the width of the .st1 rect.
// the initial text size
let fontSize = 40;
txt.setAttribute("style", `font-size:${fontSize}px`);
// get the length of the text
let textLength = txt.getComputedTextLength();
while(textLength > 350){// where 350 is the max width allowed
fontSize --
txt.setAttribute("style", `font-size:${fontSize}px`);
textLength = txt.getComputedTextLength();
}
svg{border:1px solid}
text{font-family:'neue-aachen-pro';fill:#FFFFFF;}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 431.31 58.47" >
<style type="text/css">
.st0{fill:#005FB3;}
.st1{fill:none;}
</style>
<g>
<path class="st0" d="M431.31,58.47L431.31,58.47c-143.6-9.99-287.71-9.99-431.31,0l0,0l19.76-17.44c10.02-7.32,10.02-16.27,0-23.59
L0,0l0,0c143.6,9.99,287.71,9.99,431.31,0l0,0l-19.76,17.44c-10.02,7.32-10.02,16.27,0,23.59L431.31,58.47z"/>
<rect x="27.04" y="6.33" class="st1" width="377.23" height="45.81"/>
<text id="txt" dominant-baseline="middle" text-anchor="middle" x="215.655" y="29.235">This is the text, a very long text.</text>
</g>
</svg>
UPDATE
This is working on Edge and IE too:
Instead of dominant-baseline="middle" I'm using svg transform to translate the text in the center.
// the initial text size
var fontSize = 40;
txt.setAttribute("style", "font-size:"+fontSize+"px");
// get the length of the text
var textLength = txt.getBBox().width;
while(textLength > 350){// where 350 is the max width allowed
fontSize --
txt.setAttribute("style", "font-size:"+fontSize+"px");
txt.setAttributeNS(null,"transform", "translate(0,"+(fontSize/4)+")");
textLength = txt.getBBox().width;
}
svg{border:1px solid}
text{font-family:'neue-aachen-pro';fill:#FFFFFF;}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 431.31 58.47" >
<style type="text/css">
.st0{fill:#005FB3;}
.st1{fill:none;}
</style>
<g>
<path class="st0" d="M431.31,58.47L431.31,58.47c-143.6-9.99-287.71-9.99-431.31,0l0,0l19.76-17.44c10.02-7.32,10.02-16.27,0-23.59
L0,0l0,0c143.6,9.99,287.71,9.99,431.31,0l0,0l-19.76,17.44c-10.02,7.32-10.02,16.27,0,23.59L431.31,58.47z"/>
<rect x="27.04" y="6.33" class="st1" width="377.23" height="45.81"/>
<text id="txt" text-anchor="middle" x="215.655" y="29.235">This is the text, a very long text.</text>
</g>
</svg>
Fixing SVG Fragment Sprite Slow Loading in Edge (Fine in Chrome, FF, Safari)
We have recently switched to SVG for our decorative images and logos. We do this in the form of a single SVG file containing multiple SVG sections for each image. We hide all SVG sections and only display the target SVG.
Here is a shortened example of our SVG file:
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
.img { display: none }
.img:target { display: inline }
.socialicon {fill:white}
.btt {fill:#919191}
</style>
</defs>
<svg viewBox="0 0 16 16">
<g id="icon-facebook" class="img socialicon">
<path d="M9.5 3h2.5v-3h-2.5c-1.93 0-3.5 1.57-3.5 3.5v1.5h-2v3h2v8h3v-8h2.5l0.5-3h-3v-1.5c0-0.271 0.229-0.5 0.5-0.5z"></path>
</g>
</svg>
<svg viewBox="0 0 16 16">
<g id="icon-google-plus" class="img socialicon">
<path d="M5.091 7.147v1.747h2.888c-0.116 0.75-0.872 2.197-2.888 2.197-1.737 0-3.156-1.441-3.156-3.216s1.419-3.216 3.156-3.216c0.991 0 1.65 0.422 2.028 0.784l1.381-1.331c-0.888-0.828-2.037-1.331-3.409-1.331-2.816 0.003-5.091 2.278-5.091 5.094s2.275 5.091 5.091 5.091c2.937 0 4.888-2.066 4.888-4.975 0-0.334-0.037-0.591-0.081-0.844h-4.806z"></path>
<path d="M16 7h-1.5v-1.5h-1.5v1.5h-1.5v1.5h1.5v1.5h1.5v-1.5h1.5z"></path>
</g>
</svg>
<svg viewBox="0 0 16 16">
<g id="icon-twitter" class="img socialicon">
<path d="M16 3.538c-0.588 0.263-1.222 0.438-1.884 0.516 0.678-0.406 1.197-1.050 1.444-1.816-0.634 0.375-1.338 0.65-2.084 0.797-0.6-0.638-1.453-1.034-2.397-1.034-1.813 0-3.281 1.469-3.281 3.281 0 0.256 0.028 0.506 0.084 0.747-2.728-0.138-5.147-1.444-6.766-3.431-0.281 0.484-0.444 1.050-0.444 1.65 0 1.138 0.578 2.144 1.459 2.731-0.538-0.016-1.044-0.166-1.488-0.409 0 0.013 0 0.028 0 0.041 0 1.591 1.131 2.919 2.634 3.219-0.275 0.075-0.566 0.116-0.866 0.116-0.212 0-0.416-0.022-0.619-0.059 0.419 1.303 1.631 2.253 3.066 2.281-1.125 0.881-2.538 1.406-4.078 1.406-0.266 0-0.525-0.016-0.784-0.047 1.456 0.934 3.181 1.475 5.034 1.475 6.037 0 9.341-5.003 9.341-9.341 0-0.144-0.003-0.284-0.009-0.425 0.641-0.459 1.197-1.038 1.637-1.697z"></path>
</g>
</svg>
</svg>
Here is an example of how we reference the SVG images:
<img
alt="Facebook"
id="facebookhome"
class="iconso"
src="/images/svg/svgsprite-1.6.svg#icon-facebook"
>
This works just great in Chrome, Firefox, Opera and Safari. Every new page load has an instant display of the images.
However, in IE11 and Edge, every time the page is loaded it's as if the SVG images are loaded last and it leaves the placeholder empty until everything else is loaded first (it seems). It's only a very short delay (0.5-1s) however not very nice for UX and slightly offputting.
Any ideas on what's causing this?
Any suggestions, tips, and advice are greatly appreciated.
We are also running HTTP2 so maybe SVG sprites won't perform any better anyway?
Embed one image of a SVG sprite in HTML
I have an automatically generated SVG spritemap (grunt-svg-sprite) which looks like this file: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="116" height="69" viewBox="0 0 116 69"> <svg width="116" height="25" viewBox="0 0 116 25" id="block1" y="0"> <path fill="#fff" stroke="#FF51D4" stroke-miterlimit="10" d="M0 0h116v25H0z"/> <path fill="#D5FF54" stroke="#FF51D4" stroke-miterlimit="10" d="M0 0h116v25H0z"/> </svg> <svg width="20" height="20" viewBox="0 0 20 20" id="block2" y="25"> <path fill="#FF001A" d="M.5.5h19v19H.5z"/> <path fill="#1D1D1B" d="M19 1v18H1V1h18m1-1H0v20h20V0z"/> </svg> <svg width="27" height="24" viewBox="0 0 27 24" id="block3" y="45"> <path d="M.5.5h26v23H.5z"/> <path fill="#6BFF4E" d="M26 1v22H1V1h25m1-1H0v24h27V0z"/> </svg> </svg> This SVG consists of three "images" which have the IDs "block1", "block2" and "block3". I want to display only "block1" on my web page, so that the dimensions of this image should be scalable. I want to set the width to 10rem and the height should be automatically adjusted. I did it this way: <img src="https://cdn.mediacru.sh/ahw4Jhv0r6GG.svg#block1" style="width:10rem;"/> And here I created a JSFiddle. The problem is, that the web browser displays all three blocks instead of only "block1". How can I do this with an <img>? I have to support the latest versions of web browsers and only IE11, previous versions would be great, but is not a must. (I can not use the object HTML tag, because I am limited in my IE11 support - I can not see the objects on this page, I see the images of "iframe", "img" and "CSS background" but "object": three times: "Active content removed").
The easiest way to solve your problem is to add some CSS directly to your SVG file:
<style><![CDATA[ svg svg { display: none; } svg svg:target { display: inline; }]]></style>
This simple CSS prevents all the blocks from display and shows only the one you're targeting to.
Here is your SVG file with added CSS and JSFiddle demo.
While you use Grunt you can automatize it using e.g. grunt-string-replace task (running it on SVG file after processing with grunt-svg-sprite). The task should look more or less like this:
'string-replace': {
dist: {
files: {
'./src/preprocessedSVG.svg': './build/sprite.svg'
},
options: {
replacements: [{
pattern: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="116" height="69" viewBox="0 0 116 69">',
replacement: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="116" height="69" viewBox="0 0 116 69"><style><![CDATA[ svg svg { display: none; } svg svg:target { display: inline; }]]></style>'
}]
}
}
You can add some variables or RegExps to pattern to make it more robust and bulletproof.
--
The other solution is to switch to inline SVG nicely described by Chris Coyer (http:// css-tricks.com/svg-sprites-use-better-icon-fonts/). There is also Grunt task for that - [grunt-svgstore] (https:// github.com/FWeinb/grunt-svgstore).
P.S. You need to copy those links and remove space after "https://" cause I am new to StackOverflow and can not post more than 2 links...