How do you get an SVG Font to work in IE 8?
Here I have a single glyph defined and it displays perfectly in all browsers I've tried except for IE8 (link to source):
<html>
<head>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" id="Layer_1" enable-background="new 0 0 542 324" space="preserve" viewBox="0 0 542 324" version="1.1" y="0px" x="0px">
<defs>
<font id="PlainBlackNormal" horiz-adv-x="199">
<glyph unicode="!" horiz-adv-x="253" d="M232 798q0 -24 -8 -62t-18 -78t-19.5 -74t-12.5 -50l-5 -25q-3 -11 -5.5 -25t-4 -33t-1.5 -47q0 -33 5 -56l7 -36q2 -13 -0.5 -19t-16.5 -6q-11 0 -23.5 22.5t-24 56t-20 74t-11.5 76.5l20 170q-1 17 -5 37t-11 35t-17.5 21.5t-24.5 -4.5h-16q0 3 -2.5 5t-2.5 5 q0 5 26.5 21t62.5 42q1 0 14 10l28 23q15 13 30 23.5t21 10.5q12 0 23.5 -29t11.5 -88zM238 119q0 -12 -24.5 -37t-59.5 -70q-4 3 -18 16t-29.5 29.5t-27.5 33t-12 26.5q0 3 11.5 19t26.5 34l27 31q12 14 15 14q1 0 15.5 -13.5t31.5 -31t30.5 -33t13.5 -18.5z"></glyph>
<font-face font-family="PlainBlackNormal" units-per-em="1000" ascent="1000" descent="-200"></font-face>
</font>
</defs>
<text id="one" font-size="84.06" space="preserve" transform="matrix(1 0 0 1 47.276 67.043)" font-family="PlainBlackNormal" fill="#000" color="#000">!</text>
</svg>
</body>
What am I doing wrong that would prevent the above from working in IE8?
Since IE8 doesn't have SVG support, it also doesn't support SVG fonts.
Related
So from Figma, I exported icon as SVG and put it in my code.
my UI Designer mentioned it looks different in Chrome on Mac, somehow it slides from the center
I tried to check it but it seems fine on my computer (Chrome on Windows),
I tried to overlay Figma box and SVG box.
This is the detailed version with grid and 1px border.
my UI Designer tried to put on grid and it shows that it slides half a pixel.
I only put styling : vertical-align: middle; and didn't try flex center or anything bcs other icons seem fine.
here's the SVG snippet
<svg xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
preserveAspectRatio="xMidYMid meet"
width="18"
height="18"
viewBox="0 0 18 18"
style="vertical-align: middle;">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.55 10.05H4.45001C3.86971 10.05 3.40001 9.57958 3.40001 8.99998C3.40001 8.42038 3.86971 7.94998 4.45001 7.94998H13.55C14.1303 7.94998 14.6 8.42038 14.6 8.99998C14.6 9.57958 14.1303 10.05 13.55 10.05ZM9 2C5.1339 2 2 5.1346 2 9C2 12.8654 5.1339 16 9 16C12.8661 16 16 12.8654 16 9C16 5.1346 12.8661 2 9 2Z"/>
</svg>
My friend mentioned it might be because of anti-aliasing changing the SVG Path coordinates? I tried to google up but found nothing, I'm just curious if anyone knows better about this
The path itself is exactly 14x14, so in this example I moved the path to 0,0 and made the viewBox="0 0 14 14". Now without all the other attributes the SVG should fill out the parent element. Now, it is easier to control the width and the height. In some cases you might need to set the SVG to display block.
div {
margin: 1px;
}
.w100 {
width: 200px;
background-color: orange;
}
.w100 svg {
display: block;
}
.em1 {
background-color: lime;
width: 200px;
}
.em1 svg {
height: 1em;
}
<div class="w100">
<svg xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
stroke="none"
viewBox="0 0 14 14">
<path fill-rule="evenodd" clip-rule="evenodd" d="M 11.55 8.05 H 2.45 C 1.8697 8.05 1.4 7.5796 1.4 7 C 1.4 6.4204 1.8697 5.95 2.45 5.95 H 11.55 C 12.1303 5.95 12.6 6.4204 12.6 7 C 12.6 7.5796 12.1303 8.05 11.55 8.05 Z M 7 0 C 3.1339 0 0 3.1346 0 7 C 0 10.8654 3.1339 14 7 14 C 10.8661 14 14 10.8654 14 7 C 14 3.1346 10.8661 0 7 0 Z"/>
</svg>
</div>
<div class="em1">
<span>Test: </span>
<svg xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
stroke="none"
viewBox="0 0 14 14">
<path fill-rule="evenodd" clip-rule="evenodd" d="M 11.55 8.05 H 2.45 C 1.8697 8.05 1.4 7.5796 1.4 7 C 1.4 6.4204 1.8697 5.95 2.45 5.95 H 11.55 C 12.1303 5.95 12.6 6.4204 12.6 7 C 12.6 7.5796 12.1303 8.05 11.55 8.05 Z M 7 0 C 3.1339 0 0 3.1346 0 7 C 0 10.8654 3.1339 14 7 14 C 10.8661 14 14 10.8654 14 7 C 14 3.1346 10.8661 0 7 0 Z"/>
</svg>
</div>
I have the following svg icon that I want to change the color of to #2F855A:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path class="heroicon-ui" d="M8.7 14.7a1 1 0 0 1-1.4-1.4l4-4a1 1 0 0 1 1.4 0l4 4a1 1 0 0 1-1.4 1.4L12 11.42l-3.3 3.3z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path class="heroicon-ui" fill="#2F855A" d="M8.7 14.7a1 1 0 0 1-1.4-1.4l4-4a1 1 0 0 1 1.4 0l4 4a1 1 0 0 1-1.4 1.4L12 11.42l-3.3 3.3z"/>
</svg>
How do I do that?
.icon{
width:100px;
height:100px;
}
<svg class="icon" fill="none" stroke="#2f2f2f" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
You need to use stroke attribute on svg. You can choose any value you want. for example stroke="#2f2f2f will set the color as dark gray.
I've got a shape that I've defined as an SVG path, and I'd like to fill it with a solid color. The path itself looks correct, and a stroke follows the shape I want. However, when I change the fill property from none to a color, the color overflows the curve I've defined and creates a rectangle shape plus a blob.
In these examples, I'm using an inline SVG style attribute, but I get the same result using CSS styles to fill the <path>.
<p>Path with stroke looks correct:</p>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="210" height="297" viewBox="0 0 210 297" version="1.1">
<path
style="fill:none;stroke-width:0.3;stroke:#000"
d="m47.6 69.5c0 22.9 0 45.9 0 68.8 37 0 74.1 0 111.1 0 0-22.9 0-45.9 0-68.8m-111.1 0c7.5-9.2 17.7-17.8 30-18.8 11.1-0.8 20.6 7.2 26.4 15.9 5.6 9 12.6 18.9 23.6 21.3 11.1 2.1 21-5.6 27.7-13.7 1.3-1.5 2.5-3.1 3.5-4.7"/>
</svg>
<p>But 'fill' covers more than it should:</p>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="210" height="297" viewBox="0 0 210 297" version="1.1">
<path
style="fill:blue;stroke-width:0.3;stroke:#000"
d="m47.6 69.5c0 22.9 0 45.9 0 68.8 37 0 74.1 0 111.1 0 0-22.9 0-45.9 0-68.8m-111.1 0c7.5-9.2 17.7-17.8 30-18.8 11.1-0.8 20.6 7.2 26.4 15.9 5.6 9 12.6 18.9 23.6 21.3 11.1 2.1 21-5.6 27.7-13.7 1.3-1.5 2.5-3.1 3.5-4.7"/>
</svg>
How can I fix this and make the fill color follow the curve on the top of the shape?
It's the way you are coding the path. If you look at the d attribute you have an m command (move to) in the middle. This means that you are not coding the path continuously. This is how I would do it:
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="210" height="297" viewBox="0 0 210 297" version="1.1">
<path
style="fill:red;stroke-width:0.3;stroke:#000"
d="M47.6,69.5
C55.1,60.3,65.3,51.7,77.6,50.7
C88.7,49.9,98.2,57.9,104,66.6
C109.6,75.6,116.6,85.5,127.6,87.9
C138.7,90,148.6,82.3,155.3,74.2
C156.6,72.7,157.8,71.1,158.8,69.5
V138.3H47.6z"/>
</svg>
This question already has answers here:
Closing SVG tags, explicit or self closing?
(2 answers)
Closed 5 years ago.
The reason why I asked was because, everyone does it like this.
></path>
All the tutorials show /> without the </path>
Spotify:
<svg class="icon-play" viewBox="0 0 85 100"><path fill="currentColor" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path></svg>
Google:
<svg width="100" height="100" style="background-color:pink;" viewBox="0 0 24 24">
<path fill="currentColor" style="fill:green;" d="M7.995,18.9899999 13.68046871,15.4912499 13.68046871,8.49374997 7.995,4.995 Z M13.6804687,15.4912499 19.3659374,11.99249994 19.3659374,11.99249994 13.6804687,8.49374997 Z"></path>
</svg>
Twitter:
<svg style="fill: currentcolor;color: #1DA1F2;" width="67" height="67" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10"></circle>
<path fill="white" d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path fill="green" d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" ></path>
</svg>
YouTube:
<svg width="100" height="100" version="1.1" style="background-color:black;" viewBox="0 0 36 36">
<path fill="currentColor" style="fill:#0059dd; "d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"></path>
</svg>
Neither is correct, and neither is incorrect. Both ways are valid. Use whichever you prefer.
Obviously if the path has child elements (eg. <title> or <animate> then you need to use the closing tag. But otherwise, it doesn't matter.
I'm currently trying to create the SVG of an old image, however I have trouble creating the correct rotated and positioned text cutout.
When I try to add a <text> element it ends up stretched, under the form or is not visible at all.
Here is what I came up with so far:
<svg
height="360px"
width="100%"
preserveAspectRatio="none"
viewBox="0 0 100 360"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path
id="banner"
d="M0,186 L 100,0 100,186 0,360 Z"
fill="#2180b3"
vector-effect="non-scaling-stroke" />
</defs>
<use xlink:href="#banner" />
</svg>
And here is what I'm trying to archive:
The cutout should be white
Thanks!
You can just use an image to svg converter like this one
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="1280.000000pt" height="376.000000pt" viewBox="0 0 1280.000000 376.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.13, written by Peter Selinger 2001-2015
</metadata>
<g transform="translate(0.000000,376.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M12700 3702 c-52 -7 -95 -14 -96 -15 -14 -22 -434 -961 -432 -966 2
-5 143 -157 313 -339 l310 -330 3 413 c1 227 1 602 0 832 l-3 418 -95 -13z"/>
<path d="M11785 3569 c-176 -26 -331 -49 -343 -51 -21 -3 0 -33 199 -283 184
-231 223 -276 230 -260 10 28 240 617 246 633 3 6 1 11 -3 11 -5 -1 -153 -23
-329 -50z"/>
<path d="M5440 2648 c-2989 -435 -5436 -792 -5438 -793 -1 -1 -1 -391 0 -866
l3 -864 5592 760 c3076 418 5596 765 5601 770 10 10 441 948 449 976 3 10
-122 155 -352 410 -319 353 -360 394 -388 396 -18 1 -2478 -354 -5467 -789z"/>
<path d="M11818 2058 c-75 -189 -135 -344 -134 -344 1 -2 669 88 732 98 18 2
-14 46 -208 283 -126 154 -234 286 -242 293 -10 10 -38 -52 -148 -330z"/>
</g>
</svg>