Embed one image of a SVG sprite in HTML - 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...

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">

CSS - unwanted spacing between letters from SVG logo

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,d09GRgABAAAAABKoAA8AAAAAH9wABzMzAAAAAAAAAAAAAAAAAAAAAAAAAABHUE9TAAABWAAAAQ0AAAIwcv95cE9TLzIAAAJoAAAATwAAAGBU7LqkY21hcAAAArgAAAB5AAABggHjNMxjdnQgAAADNAAAAGYAAADkM5kZPWZwZ20AAAOcAAAGcAAADW1NJI58Z2FzcAAACgwAAAAIAAAACAAAABBnbHlmAAAKFAAABUIAAAd8oAlRPWhlYWQAAA9YAAAANgAAADYVlLVsaGhlYQAAD5AAAAAdAAAAJAI9Ay9obXR4AAAPsAAAAEIAAABCHisBD2xvY2EAAA/0AAAAJAAAACQOphCibWF4cAAAEBgAAAAgAAAAIAFLDdFuYW1lAAAQOAAAAZ4AAAMVRe3lg3Bvc3QAABHYAAAAFAAAACD/uABDcHJlcAAAEewAAAC7AAAA1c1LrMB4nG1RO24CMRB9tne9sASqVKlImjQ5RYSoKKmREKICpUA0kTgCx0iZw+QYUZSPiFIkEmLyPF6QgZ3Vs2fn/zwwAErcYwTX6w+GuJs8LubozsfLB1wioxciMLCJbhIdcLPpgrHpSaslmGWe4Kk34EwHL7igvtLsZ6zpaSKKwbncHv152Z5F1GUdiXwRP0m8Z++cXUu0OEtg1ebZ4G1pB5FTC1EFnPJsJl0sbZlGvCmHX3Q1O873qh0/I2+tHmq4Q12nL5ERfc1eYkgbX0A28oFS3ql9V3PvAlvZyl8N6z2XXOfx7N8+YVLQX/CzOq1XJo6MTcUiYs8pbCdmxn3f4ErrAde6604Ftf0Dj741MgAAAHicY2BhvMu0h4GVgYGpiymCgYHBG0IzxjEYMToB+QwcDHDALoBgM4T6OCowLGBQUJBkPvEfqJ8llJFPgYFxOkiOSQpoJgODAgMzAA09CpcAeJxjYGBgZoBgGQZGBhCoAfIYwXwWhgQgLcIgABRhYVBgcGZwZUhlyGTIZchnKFWQ/P8fKAsRTYGKFoNE/z/8v///vv8L/s/9P+f/7P8z7n+FmowBGNmwi6OoIayECex+PICFFUiA7OJk4AKS3Dy8hA2lFwAA9vka0gAAAHicY2AgE8wDwgaGBqY9DAxMUgwM/+2YTvz/wqT0/8d/M4b5QNjI0MhkD5Tz+v8VwQeJAMXsQaJAcWQzniFMYRaGmgOVZ7T+Pwcmz+j8fwpU3g6u/xmjO1z/O0Z7uH4JCAQAKl038wAAeJytVml3EzcU1XhJQshGNlqmpTKKUxprDKUsAQyEmTguuIsToJ2B0s7EDt0X6Eb3fcG/5k3SnkO/8dN6n2SbBBJ62lN/8LuSrvRWPQ0JLUlcCauRlPW7YmS5Tn2XroZ01KWDUXxDtq+ElCkmfw2IAdFsqlW3UCARkQjU4rpwRBD7HjmaZHzDo4yWLUn3GpSbvbp+0NkdVJtV6quGBcoWo5VrYUEV3HYoqdHA1ELkSppnNB9FMrXspEUHMdUZSTrM64eZea8RSljTTiQNNsIYM5LXBhkdZ3Q8duMoilxYS4NBk8RKSKLOZLACt077Ge2vJ3fHRJMZd/NiNYpaSUROKYoUiUa4FkUeZbWE5lwxgS/5oBFSXvnUp3x4DmrsUU4reCJbaX7Vl7zCPrrWZv6n/rjapOxcAYuBbMs2FKSH80WEZTmMG26yEoUqKkSSFi6FWHM5GB39HuU19QeldZGxse3DUPkKOVJ+QpnVG+Q0YQXl5zzq15JNHYIvObEq+QRaiCOmxIvG1AG93j8kgqo/V+hla5femr1Be4pTggkB/I5lta0SzqSJsHA5CyRdGNm1EvlUyaJVsXuH7TSDXcK979rmTUPaOLS+ezCL8nBVIZoreDSs00ymSq1k0aMRDaKUNBxc5O0Ayo9ohEcrGI1g5NEojhkzIZGIQBN6aTSIZTuWNIqgeTSm65fDNNdajGZoeE3d9miPri+H9Ut20i1gfsLMj+tUjAVXwnRsLCAn8Wm0xFWOavLTYf4bwR8508hEttgIUw4evPXbyC/UjswVFLZ1sWvXeQsuD89E8KQG+2uY3ZqqHRKYCjGhEK2AxNl1x3FMria0SEWmejmkMeXLKg2h+HYrFJwvY6j/c3zcEaPC99txOt5Xojsl9wDCNAnfJkoeTenUYTmNOLPcq9Msy8d0mmP5uE7zLPfptI+lq9N+lk/odIDlkzrdxfIZrbpxp74YEVayTM51viAezW1anO4t3rSLpU2Ls73FW3ZxvxY0XPoP/j0F//bDLgn/WBbgH8sD8I+lgn8sZ+AfyyL8YzkL/1g+Df9YHoR/LLWWFVOmnoba8VgGyG0cmFTi6mmu1bImr0QebuEhXICa3CGLKplX3EMfyXDZ+8Pd1KZDw1WuNDo0l+adqWqI/sdePrspPDtxjmh5zFj+HE6znOrDOnFZt7WF58X0H4J/i2fVfHrEmWJfjyIecGB7+3FJknmPjuny3opHx/+JioJugn4CKRLTRVmWNW4ECO2FdrumaugcId4YNFp0h+OOMzWJCM+jY03THtByaKJFQ0sHhU+7gtJau6ykrLRx5smtNFm251FO+V22pJh7ycJyuJGRWeluZGaz+yKf++sAWrUyO9QSbnbw4DWNucfZBygTxC1F2SBpYTkTJC5wzP3twT0JTEPXV0vIsYKGJX6cBgKjBedto0TZTppD80Ay8ii4/EOn4kT2qmiMwH/DdtD7ulAIp7qxkJjNz3ZioSoI0+neEg2Y9SVVY6WcxUovhOyMjTSJy2FZVvB2s/WdScl2dVJBfUWMLmz+TLBJ3K7aO9lSXPJnNlkSdNMV87fEgy53U3wW/aPMUVyiPUHYcPGSykpUTsvOJO7tuS2rK25jy+rCtnsfteO8pvnSoxT6mk6W2rCNawxO7UhFQstUxo7AuMz1OWsjn9Cg8q3rXKAK16eMm2fPX0RjwhvT3fIvS7r2f1Ux+8R9rKLQqjbVSyHq2FlFA54vdaOyhNHJUkF14tLxpheCGkIwZa89vkFwwyfKdBS3/Pkd5i/gOGdygo4BX9R0AqLOUawi3HIJD243Wi9oLmiqA76o19HCAF4CcBi8rNcdM9MAMDPLzKkCrDCHwSXmMLjMHAZX9AZ64XmgV4Acg17VG46dC4HsXMQ8h9FV5hl0jXkGvcY8g66zzgDgddbJ4A3WySBmnQwS5iwBrDKHQZM5DFrMYbBm7PKBbhi7GL1p7GL0lrGL0dvGLkbvGLsYvWvsYvSesYvR+4jxqV4CPzAjOgv4oYXnAD/ioJvRAkY38dZ2OLcsZM7HhuN0OJ9g8+neqZ+akdnxmYW843MLmX4b53QIX1jIhC8tZMJX4FZ6531tRob+jYVM/9ZCpn+HnR3C9xYy4QcLmfAjuGd65/1kRob+s4VM/8VCpv+KnR3CbxYy4XcLmXBHb+zKZbpftH6JBtYoO9O43X2ivb8BbCPTyAABAAH//wAPeJx1VU1sE1cQnvfWXjs2JF7/7PoPg71eO+A0JLbXJokdNsGJQ3aTACakKU0dNSRNKloacQCVKkSJFC49AAUJVValFnHogRak0kPLrZceeu2p6qWqqNQDh7ZSkao4nbeOwVWFrd31vpnd+d4333wGeMmHQHLnL/od/R5CkNV6HYSA5KSU+AlHuXHA2ypmjelAKVe1EI47zhm4EIJgIp6wOqSUpZuo2UGSSYuSLSHH2onPG8G7vNROZJK/v7Bw//zZj9LL5ZWhpb6+paGV8nL61tk9c/eWl+/NaYX5U7iGkcp8UUMsFQC6Sh+DEw5rXcCBxcpZFrE0mUMkwzpPrFaYw/LHgIFwglNgH5sjkFJ8USHqa3zp6vYvVKhfJyP1bzc26OONO2ufsb1SiO08o+fpE3BBGO5ojg5ioRwBKx3XH7hPvKrt43GDJR0sFlrFqrpuYwWrSAKrGNIfRDBJZkm7iy9N1aIvIma+idpMIlXci0GM2VnNKwgAQlgIST6E5ErEBDsySgRZ5eVYk1dJoDk1i9TyPq+Yoedv979rXBkdvWK81a9PTg4UJicL9Ml2cHC0tFaprJWGiHX75slS6SQ72J4P4J5naAwkiEBR65cIWOwIs41Qgg22oAQssMiY5arAcbqO6EzgBjX8fn/Ev09MxGMmx2CLstbm8lILvAjxxXlbtJvIdIarrzhPFQ8NhSvGzbMfGvrmyan14/WvxuykzT6WJfZkuj8Qem2mvHZi6mq5dPX0p4VspsgwqsjO35wHO94B4MkIsjuhZnOoKZ+Xl8dqNTmXS6XwoMHtJ3QxrSjpnngy09DvGJ5/pUF81qO58PcI28ExYggu6hBT7GX4AvYg1hnG+O/c3pfWOXj4sKLgYdY516PEe3riSs/zOtyPyGMUznwd8VNiJeMNQYgcIcRatdt4zmod0S2U7mogCOyeRXmMUp7XnwdnTahROCALnphH9rQ5QikQfYIsNDrNfuxeM77GdOGZe+NSTe3Na7WlnFa7HZnJ9r0eji4WaOzSpfoPJKwdLY/W/yDhq+xCg4Ox+CupQ91NDVxA7B04uF3aQeyuOda6bkVtEpxrU5EuxOQKuYKiFxPbE7zDlxJb2uzFiR4kL6T45zXDuDY9vWUYW9OFiYkCU6Ide3tirdw4r7+QIfLn3XlG/kEMSeYzIqpP4igbbQ5QhnhlY4HqQ5ZNnzFMn0lCIp5SmM+IiWSeqQ/rJ7tpq+UwMFKEmvi+WU9k40u9C7kjw2eODqxO9K0q2fLpdDo3MHx6sHBxyh4NvCft65W8NkdwuJiZ6gqIFzrDYsDb5gwMD6QnU41e2xHrXXoDRJh+JBKesFYfxFaHAV1x04p00TkLoRS1xvMwj88YjYazMAYwg6dksSU4qzlk5lWemA1brSDUWKJIZDWjZnwZn8z4TOfJXemYMr9SqdS2tuQDSjAoCG9Wf768uXn5p5jiRVwj2Mcl1LobjEdoXFxTgh4rCouhQaeZf+5BUnPVdCps9Pyu82h7cckNblSewDv8puOYiFQhI3hxwlWBLt3afyb99ge1d46U2DRosvL+ZdJT/23j+BhxMI5k8jHO3VNoh+IjOwGTI2aiexiDVYoclRgIN2V4yAxbYC5IYAK5wJx22CtyKDE3G74OIueZ1HKZL3IOV/9CKhDOH6JP1ZS3s/P6J86u/Sm0CFJfp+d2OnF+nZB4yJ8raSFg/1AzzYpApsy/BUecvfghDyVome/6l83pbplsUr9IF3dU9B4nqLsbMKGy+RgnuAHhfzUa+Jtl/lPi86ZRtZjUv4VsQFMAAAABAAAABzMzNZvVfF8PPPUIBwPoAAAAANYL/kYAAAAA1h5ACP5z//QD1QMTAAEABwACAAAAAAAAeJxjYGRgYD7xn5WBgUXyXzEDCDAyoAIBAFxxA3AAAAACSwAoARsAAALdACcCnwBTArQAIgJ3ACABLQA1AS0ASAEtAEIEGQBIAo8AIAITABQBswAIAq8ARQEGACMAAP6A/nMAAAAAAAYADABSAIIA/AFOAWwBggGgAf4CQAKWAuIDKANiA4wDvgABAAAAEQAoAAIAAAAAAAIAKAA6AIsAAACEDW0AAAAAeJx9kc1Kw0AUhc+0tajgz8KVgsxSFyZpEYR2VQUXUrELK25jjUkkdsLMZOHOrStx7xu48SX0RXwOwZN0akWKGcJ899xz751JAKzjAwKT55LvhAWWGU24hgauHNexiRvHDazhwfECVvDkuEn9xfEq/a+sEo0lRm94dyywIQrHNSyKR8d17Itnxw1si6l/AZvi03GT+pfjVezXto5Ufq/TOLGyHbRa8jyJ5KkaWxNpHVo50Oo2GlnZK2yitJE7ibW56fh+nNqkuPJG6s4/KbI0suEwC/1Z5e4MD1V2feC1g6A77Pdkd5bYKzO/hpXhRaRNqsayKvhjLWdztBnpNLfGM2nmKR37Z8d9HEEhxz00UsRIYCHRRoAWl8Q5lYj7KV1j5gwjzRVWvgFJ4ZbaqIp7KLgn1DSdEjtVP8v+Bh34XDGnlI6Cv9ZjlcId1RPGGTMRcyGG5JDqvJm7c9VDahmuccCe5dkDdNmlz/NI0ryKvZ+a+TebZi8q1fBspUv+mvB/1+m9J7c2vGn5ffPK71X9Mu7ld4qZP8Mx+t8GF5o4AAB4nGNgZgCD/1sZjBgwgSAALNMB+3icY/DewXAiKGIjI2Nf5AbGnRwMHAzJBRsZ2J0cOBmyo72tGdTZGbTAfIECpgSOAA4HDhM2HRY5dnYOqHARQwZbBJsHmxWLAZMqK1iYz8mRU8ZBwkHEQcCB14Hbgf0AAzsDJ1BCFCjB4IACwRLMDC4bVRg7AiM2OHREbGROcdmoBuLt4mhgYGRx6EgOiQApiQQCkH1JbEFsTmxmLHpMCqzsPFo7GP+3bmDp3cjE4LKZNYWNwcUFAI8ELmQA) 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.

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>

How can I change the color of this SVG?

I'm trying to change the color of this SVG icon with CSS:
<symbol id="meetings">
<svg viewBox="9 0 33 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(10.000000, 0.000000)">
<polygon id="Fill-1" points="0.484430769 31.5076923 31.9921231 31.5076923 31.9921231 0 0.484430769 0"></polygon>
<g id="Group-4" transform="translate(0.000000, 5.907692)">
<path d="M4.92209231,11.8248862 C4.31409231,11.8248862 2.46006154,10.3154708 2.46006154,6.70390154 C2.46006154,2.47251692 4.8896,0.00704 7.79470769,0.00704 C9.18498462,0.00704 9.83926154,0.0715323077 10.5846154,0.745993846 C12.7123692,0.745993846 14.7702154,2.32433231 14.7702154,6.70390154 C14.7702154,10.2869169 12.9353846,11.8248862 12.3081846,11.8248862 C12.0900923,11.8248862 11.9241846,11.6338708 11.6795077,11.3847631 C11.4304,11.6328862 11.1547077,11.8539323 10.8583385,12.0439631 C10.9883077,13.9743015 11.7257846,14.7536246 13.8594462,15.5452554 C16.0896,16.3728246 17.1037538,16.9429169 17.2332308,19.1730708 C17.2494769,19.4477785 17.0402462,19.6831015 16.7655385,19.6993477 C16.7566769,19.69984 16.7483077,19.69984 16.7394462,19.69984 L0.494769231,19.69984 C0.219569231,19.6983631 -0.00147692308,19.4738708 2.03980422e-13,19.1991631 C2.03980422e-13,19.1903015 0.000492307693,19.1819323 0.000984615385,19.1730708 C0.130953846,16.9429169 1.14461538,16.3728246 3.37526154,15.5452554 C5.50793846,14.7541169 6.24541538,13.9747938 6.37538462,12.0464246 C6.07606154,11.8549169 5.79790769,11.6319015 5.54633846,11.3808246 C5.29969231,11.6314092 5.13476923,11.8248862 4.92209231,11.8248862 M31.0129231,19.69984 L18.6973538,19.6983631 C18.4369231,19.6993477 18.2212923,19.4960246 18.2070154,19.2355938 C18.2178462,18.26624 17.9244308,17.3180554 17.3671385,16.5244554 C17.1515077,16.2615631 17.1899077,15.8736246 17.4532923,15.6579938 C17.5035077,15.61664 17.5606154,15.5831631 17.6216615,15.5600246 L17.6605538,15.5452554 C19.7971692,14.7516554 20.5326769,13.9703631 20.6596923,12.0301785 C20.2904615,11.7933785 19.9571692,11.5053785 19.6696615,11.1745477 C19.1537231,10.5055015 18.8292923,9.70944 18.7308308,8.87054769 C18.7067077,8.87300923 18.6825846,8.87497846 18.6589538,8.87497846 C18.1243077,8.87497846 17.7196308,7.74759385 17.7196308,6.95497846 C17.7196308,6.16236308 17.9943385,5.92113231 18.2562462,5.92113231 C18.3108923,5.92113231 18.3616,5.92408615 18.4108308,5.92802462 C18.2872615,5.43030154 18.2217846,4.92027077 18.2153846,4.40777846 C18.2153846,2.48580923 18.7544615,1.15559385 20.4007385,0.918793846 C21.312,0.286670769 22.6894769,0.00753230769 24.4494769,0.00753230769 C25.5748923,0.00753230769 24.6370462,0.777501538 25.6950154,1.00248615 C26.3497846,1.14180923 27.5687385,1.60556308 27.5687385,4.40777846 C27.5623385,4.92027077 27.4968615,5.43030154 27.3732923,5.92802462 C27.4220308,5.92408615 27.4732308,5.92113231 27.5278769,5.92113231 C27.7902769,5.92113231 28.0644923,6.16236308 28.0644923,6.95497846 C28.0644923,7.74759385 27.6603077,8.87497846 27.1256615,8.87497846 C27.1015385,8.87497846 27.0774154,8.87300923 27.0532923,8.87054769 C26.9548308,9.70944 26.6304,10.5055015 26.1144615,11.1745477 C25.8299077,11.5019323 25.5005538,11.7874708 25.1357538,12.0227938 C25.2612923,13.9688862 25.9958154,14.7511631 28.1353846,15.5452554 C30.3635692,16.3728246 31.3767385,16.9429169 31.5062154,19.1730708 C31.5224615,19.4472862 31.3137231,19.6831015 31.0395077,19.6993477 C31.0306462,19.69984 31.0217846,19.69984 31.0129231,19.69984" id="Fill-2"></path>
</g>
</g>
</svg>
I'm using that SVG in the HTML like this:
<svg class="active" width="32px" height="32px">
<use xlink:href="#meetings"/></use>
</svg>
Here is the CSS (using SASS):
.foot__icon svg.active {
fill: #ffffff !important;
path, g, #Group-4 {
fill: #ffffff !important;
}
}
This isn't working and I can't figure out why. When I try to remove the fill declaration from the g tag (fill="#03A9F4") then the SVG disappears completely.
The active class is even showing up in dev tools but the color is not showing up white
Update: This seems to be an issue with the <use> tag. If I put the class directly on the SVG, then it works as expected. Still not sure what's going on here.
When you reference something via a <use>, the referenced elements don't suddenly become part of the DOM "under" the <use> element. In other words, the DOM still remains like this
<symbol id="meetings">
<path>
<svg class="active">
<use>
Not
<svg class="active">
<use>
<symbol id="meetings">
<path>
So a CSS rule like svg.active path won't work.
Symbols are meant to be static copies of an element, or set of elements that are reused. If you want to style them, you should style the original symbol. For instance:
#Group-4 {
fill: #ffffff;
}
If you want to dynamically style the symbol then there is one limited solution you can use. There is a special keyword value for SVG colors named currentColor, which allows you to use the current value of color for the fill or stroke.
This "trick" allows us to pass a single colour into the symbol. In the example below I am using it to colour the path in the symbol.
#Group-4 {
fill: currentColor;
}
svg.active {
color: red;
}
svg.inactive {
color: lightgrey;
}
<svg width="0" height="0">
<symbol id="meetings" viewBox="9 0 33 32">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(10.000000, 0.000000)">
<polygon id="Fill-1" points="0.484430769 31.5076923 31.9921231 31.5076923 31.9921231 0 0.484430769 0"></polygon>
<g id="Group-4" transform="translate(0.000000, 5.907692)">
<path d="M4.92209231,11.8248862 C4.31409231,11.8248862 2.46006154,10.3154708 2.46006154,6.70390154 C2.46006154,2.47251692 4.8896,0.00704 7.79470769,0.00704 C9.18498462,0.00704 9.83926154,0.0715323077 10.5846154,0.745993846 C12.7123692,0.745993846 14.7702154,2.32433231 14.7702154,6.70390154 C14.7702154,10.2869169 12.9353846,11.8248862 12.3081846,11.8248862 C12.0900923,11.8248862 11.9241846,11.6338708 11.6795077,11.3847631 C11.4304,11.6328862 11.1547077,11.8539323 10.8583385,12.0439631 C10.9883077,13.9743015 11.7257846,14.7536246 13.8594462,15.5452554 C16.0896,16.3728246 17.1037538,16.9429169 17.2332308,19.1730708 C17.2494769,19.4477785 17.0402462,19.6831015 16.7655385,19.6993477 C16.7566769,19.69984 16.7483077,19.69984 16.7394462,19.69984 L0.494769231,19.69984 C0.219569231,19.6983631 -0.00147692308,19.4738708 2.03980422e-13,19.1991631 C2.03980422e-13,19.1903015 0.000492307693,19.1819323 0.000984615385,19.1730708 C0.130953846,16.9429169 1.14461538,16.3728246 3.37526154,15.5452554 C5.50793846,14.7541169 6.24541538,13.9747938 6.37538462,12.0464246 C6.07606154,11.8549169 5.79790769,11.6319015 5.54633846,11.3808246 C5.29969231,11.6314092 5.13476923,11.8248862 4.92209231,11.8248862 M31.0129231,19.69984 L18.6973538,19.6983631 C18.4369231,19.6993477 18.2212923,19.4960246 18.2070154,19.2355938 C18.2178462,18.26624 17.9244308,17.3180554 17.3671385,16.5244554 C17.1515077,16.2615631 17.1899077,15.8736246 17.4532923,15.6579938 C17.5035077,15.61664 17.5606154,15.5831631 17.6216615,15.5600246 L17.6605538,15.5452554 C19.7971692,14.7516554 20.5326769,13.9703631 20.6596923,12.0301785 C20.2904615,11.7933785 19.9571692,11.5053785 19.6696615,11.1745477 C19.1537231,10.5055015 18.8292923,9.70944 18.7308308,8.87054769 C18.7067077,8.87300923 18.6825846,8.87497846 18.6589538,8.87497846 C18.1243077,8.87497846 17.7196308,7.74759385 17.7196308,6.95497846 C17.7196308,6.16236308 17.9943385,5.92113231 18.2562462,5.92113231 C18.3108923,5.92113231 18.3616,5.92408615 18.4108308,5.92802462 C18.2872615,5.43030154 18.2217846,4.92027077 18.2153846,4.40777846 C18.2153846,2.48580923 18.7544615,1.15559385 20.4007385,0.918793846 C21.312,0.286670769 22.6894769,0.00753230769 24.4494769,0.00753230769 C25.5748923,0.00753230769 24.6370462,0.777501538 25.6950154,1.00248615 C26.3497846,1.14180923 27.5687385,1.60556308 27.5687385,4.40777846 C27.5623385,4.92027077 27.4968615,5.43030154 27.3732923,5.92802462 C27.4220308,5.92408615 27.4732308,5.92113231 27.5278769,5.92113231 C27.7902769,5.92113231 28.0644923,6.16236308 28.0644923,6.95497846 C28.0644923,7.74759385 27.6603077,8.87497846 27.1256615,8.87497846 C27.1015385,8.87497846 27.0774154,8.87300923 27.0532923,8.87054769 C26.9548308,9.70944 26.6304,10.5055015 26.1144615,11.1745477 C25.8299077,11.5019323 25.5005538,11.7874708 25.1357538,12.0227938 C25.2612923,13.9688862 25.9958154,14.7511631 28.1353846,15.5452554 C30.3635692,16.3728246 31.3767385,16.9429169 31.5062154,19.1730708 C31.5224615,19.4472862 31.3137231,19.6831015 31.0395077,19.6993477 C31.0306462,19.69984 31.0217846,19.69984 31.0129231,19.69984" id="Fill-2"></path>
</g>
</g>
</symbol>
</svg>
<svg class="active" width="32px" height="32px">
<use xlink:href="#meetings"/>
</svg>
<svg class="inactive" width="32px" height="32px">
<use xlink:href="#meetings"/>
</svg>
So we are setting the symbol's path to fill: currentColor, and then setting color to red for svg.active. The red gets passed into the symbol and used for the path.
And just to prove it is dynamic, I've added another reference to the symbol, with class "inactive", and made that one a different colour.

i can't handle a tag <image> in svg code

i generated a svg code for a map in illustrator to put in my website but i had this code which has a tag called <image> which i can not handle, can't give it css properties nor just put a foreground text on it, my objective is to have that image or the g or the link changes foreground color as i hover over it, but i can't find any thing about that tag, there is only articles about path or circle or line for svg tags but not <image>
here's my code :
<svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1434 1454.3" enable-background="new 0 0 1434 1454.3" xml:space="preserve">
<switch>
<foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
<i:pgfRef xlink:href="#adobe_illustrator_pgf">
</i:pgfRef>
</foreignObject>
<g i:extraneous="self">
<a xlink:href="../Reservation/Second Level/index.php">
<g id="Inezgane_Ait_Melloul.svg_xA0_Image_1_">
<image overflow="visible" width="37" height="19" id="Inezgane_Ait_Melloul.svg_xA0_Image" xlink:href="data:image/png;base64,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
CCJS2wAAAABJRU5ErkJggg==" transform="matrix(0.75 0 0 0.75 728.25 568.5)">
</image>
</g>
</a>
</g>
</switch>
it's not the full code because the full one is like thousand lines, the map has a lot of zones to cover.
but i'm kind of not familiar with svg at all, so maybe i'm doing something wrong in the concept of interactive map design