So I'm building a website and I can't get the svg icon to show up correctly on my MacBook's Touch Bar when I add the site to my favourites list.
The webpage in question can be found here: http://japesfawcett.com
I have an SVG file that is a black thunderbolt on a white background, and I am using the following code for the Touch Bar icon:
<link rel="mask-icon" href="img/favicon.svg" color="#000000">
The code of the SVG is as follows:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<style type="text/css">
.st0{fill:#231F20;}
</style>
<path class="st0" d="M41.3,45.9c2.4,1.6,4.6,0.3,7.4,0.1c-1.7,3.4-3.3,6.5-4.8,9.6c-0.6,1.3-0.9,2.8-1.5,4.1 c-0.6,1.3-1.4,2.5-1.9,3.8c-2.2,5.2-4,10.6-6.6,15.5c-2,3.7-2.7,7.6-4.4,11.6c0.9,0.5,1.8,0.9,2.9,1.4c4.6-6.2,9.2-12.3,13.7-18.5 c4.8-6.4,8.3-13.5,11.9-20.6c1.6-3.2,4.1-6.1,6.4-8.9c2.6-3.2,5.4-6.1,6.2-10.3c-4-2.7-8.7-1.7-13.3-2c2.2-6.7,4.2-13.1,6.3-19.6 c0.5-1.4,1-2.8-0.6-4.1c-4.4,1.1-6.1,5-8.1,8.4c-2.7,4.6-5,9.4-7.5,14.1c-1,1.8-2.1,3.4-3.1,5.2C42.5,38.7,41.3,42,41.3,45.9z"/>
</svg>
For some reason the Touch Bar icon for the site is appearing all white with no image visible in it. I can't get the SVG to be visible at all!
If anyone has any insights as to how to fix this it'd be greatly appreciated, it's been driving me mad!
It seems like that the problem lies in your SVG, which is incorrectly cropped (it's outside the 16x16 pixel bounds defined by the viewBox). Replace the path in it with the following:
<path class="st0" d="M2.29683698,7.21904762 C2.76399027,7.52380952 3.19221411,7.27619048 3.73722628,7.23809524 C3.40632603,7.88571429 3.09489051,8.47619048 2.80291971,9.06666667 C2.68613139,9.31428571 2.62773723,9.6 2.51094891,9.84761905 C2.39416058,10.0952381 2.23844282,10.3238095 2.14111922,10.5714286 C1.71289538,11.5619048 1.36253041,12.5904762 0.856447689,13.5238095 C0.467153285,14.2285714 0.330900243,14.9714286 0,15.7333333 C0.175182482,15.8285714 0.350364964,15.9047619 0.564476886,16 C1.45985401,14.8190476 2.35523114,13.6571429 3.23114355,12.4761905 C4.16545012,11.2571429 4.84671533,9.9047619 5.54744526,8.55238095 C5.85888078,7.94285714 6.34549878,7.39047619 6.79318735,6.85714286 C7.29927007,6.24761905 7.84428224,5.6952381 8,4.8952381 C7.22141119,4.38095238 6.30656934,4.57142857 5.41119221,4.51428571 C5.83941606,3.23809524 6.22871046,2.01904762 6.63746959,0.780952381 C6.73479319,0.514285714 6.83211679,0.247619048 6.52068127,0 C5.66423358,0.20952381 5.33333333,0.952380952 4.94403893,1.6 C4.41849148,2.47619048 3.97080292,3.39047619 3.48418491,4.28571429 C3.28953771,4.62857143 3.07542579,4.93333333 2.88077859,5.27619048 C2.53041363,5.84761905 2.29683698,6.47619048 2.29683698,7.21904762 Z"></path>
Also, the icon should be completely black, so you should change the fill property of the st0 class:
.st0{fill:#000;}
Related
I'm looking for an advice about work with SVG images, respectively icons.
What I've tried
If I'm using PNG icons, the CSS is like:
elem:after {background: url('icon.png'); ...}
I've tried the same way
elem:after {background: url('icon.svg'); ...}
but it isn't what I'm looking for. This solution lose advantages of SVG icons (they're small and blured, fuzzy).
What I have
I've generated this code online using Icomoon app.
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-love" viewBox="0 0 33 32">
<title>love</title>
<path d="M32.916 15.597c0.604-0.66 ..."></path>
</symbol>
<symbol id="icon-shop" viewBox="0 0 34 32">
<title>shop</title>
<path d="M17.148 27.977c-..."></path>
</symbol>
</defs>
</svg>
<svg class="icon icon-shop">
<use xlink:href="#icon-shop"></use>
</svg>
My question
Is it semantically correct to put icons into HTML markup, instead of putting them into CSS?
Across whole website there is about 60 icons, any unique, any are repeated more times. Generated markup above has about 50kB.
Can I put all icons into general layout template and load them all in whole website, or include just icons I use in the page?
Here I've found How to change color of SVG image using CSS (jQuery SVG image replacement)? (3 years ago), but don't know if it's the right way.
How to cache SVG properly? Is it posible when I use it like I'm writing above?
I read many articles, but not definitely sure how to do that best way.
Thanks for advice.
I'm using scrollmagic to create a 5000px scroll page that show me a svg during scrolling. Something like the scrollmagic example:
http://scrollmagic.io/examples/advanced/svg_drawing.html
But in vertical direction.
I have create an example svg a simple line:
<div id="svgPathContainer">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200px" height="5000px">
<path id="word" style="stroke-linecap: round; stroke-linejoin: round;"
fill="none" stroke="#000000" stroke-width="5"
d="M100.5,114.278c47.888,7.285,137.984,143.083,159.855,190.144
c30.89,66.468,10.254,111.869-37.772,152.906c-31.931,27.285-74.983,57.824-77.6,102.502
c-5.162,88.125,112.785,84.949,162.564,139.414c53.236,58.247,60.765,130.01,63.938,207.828
c4.147,101.679-29.448,146.444-104.211,209.857c-64.798,54.961-92.906,92.587-105.645,179.853
c-13.169,90.21,18.128,126.772,68.961,196.205c67.288,91.907,142.5,150.947,142.131,270.976
c-0.105,34.208,11.839,102.08-1.166,133.365c-10.983,26.423-67.391,53.781-93.12,73.762
c-72.74,56.487-150.915,119.124-177.245,214.908c-35.789,130.196,52.601,235.276,115.293,340.718
c40.142,67.514,80.142,136.714,121.243,203.728c24.011,39.147,25.978,64.328,23.883,111.723
c-3.379,76.453-25.588,148.162-69.406,210.981c-47.29,67.796-97.792,91.573-129.774,171.146
c-35.857,89.216-75.371,181.193-67.467,278.983c7.417,91.774,54.697,134.536,123.617,187.276
c52.593,40.247,70.239,78.729,98.745,139.482c17.03,36.297,50.864,102.872,32.315,143.921
c-18.371,40.654-99.974,70.074-133.71,95.443c-54.011,40.613-91.761,76.666-104.774,143.821
c-21.981,113.433,2.806,124.824,111,172.903c104.017,46.223,181.164,52.461,144.97,178.154
c-20.69,71.855-110.003,82.523-172.074,111.192c-26.481-39.319-116.671-107.498-68.566-157.16
c13.472-13.907,74.68-32.127,95.967-26.632c44.007,11.361,38.321,41.719,49.537,77.444c-30.281,6.589-62.791,14.078-92.874,22.222
c-0.973-11.136-3.413-27.139-0.84-38.178"/>
</svg>
</div>
I can "draw" this line from begin to end of the scroll and reverse successfully. My question is how i can make this svg responsive? I have tried :
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30%" height="5000px">
but i doesn't works... I can't embed the svg directly in an image src, because if i use an image instead the path coordinates , the drawing animation stops working. So the question is, how i can make responsive the svg path?
Chrome v49 broke letter-spacings in SVG when used in combination with matrix transformation and translations:
Living example: https://jsfiddle.net/75fpn6de/6/
SVG:
<svg height="300px" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(0.20695652173913043,0,0,0.20695652173913043,0,10.881739130434767)">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" viewBox="0 0 2500 2794" width="2500" height="2794">
<g transform="translate(1436.5 1087) rotate(0)">
<text xmlns="http://www.w3.org/2000/svg" fill="#ed7373" y="237" style="font-family: 'Great Vibes';" font-size="237" letter-spacing="0.1em" text-anchor="middle">Some text</text>
</g>
</svg>
</g>
</svg>
CSS:
#import url(https://fonts.googleapis.com/css?family=Great+Vibes);
Am I doing anything wrong here (like breaking some specs) and Chrome got more "restrictive" or is it a newly introduced bug in Chrome?
FYI: The example is (obviously) only a small part of a bigger SVG which is dynamically generated by the server and I can't just change the nesting and the usage of the transform matrix & translate functions.
I had the very same issue, and even if I couldn't find anything about this issue in the changelog, it seems it has been fixed in Chrome 50.
I'm having problem showing SVG logo image for my website project:
I can see slight thin dark line around the edge(border) of the vector object.
It seems to be prevalent around curves.
There's no border, at least when it's created on Illustrator,
nor any other dark-colored object hidden beneath.
As far as I have tested, it seems to be fine on Firefox, Safari, IE11,
but not for Chrome(v43) and Android-Stock-Browser(v4.2).
edit:
I made a sample here.
It has 'S' shaped orange object on square background object with the exact same color. No object here has border.
This is made on Illustrator CS3, and I created SVG file with the same, as how it originally was done for my project.
Here's screenshot comparison:
And fiddle:
http://jsfiddle.net/alexklaus80/tp0adzqn/
Here's the code of SVG file that used in this example:
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14948) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<g id="Layer_copy">
<rect x="-30.987" y="-30.357" style="fill:#EF8200;stroke:#EF8200;stroke-width:0.2;" width="156.636" height="156.634"/>
<g>
<path style="fill:#EF8200;stroke:#EF8200;stroke-width:0.2;" d="M70.966,51.515c1.779,1.968,3.086,4.138,3.934,6.476
c0.854,2.356,1.277,5.081,1.277,8.194c0,7.416-2.74,13.531-8.225,18.345c-5.482,4.812-12.287,7.218-20.413,7.218
c-3.745,0-7.49-0.587-11.239-1.748c-3.747-1.164-6.98-2.575-9.703-4.227l-2.544,4.314h-4.735l-0.832-28.755h4.795
c0.982,3.548,2.134,6.755,3.454,9.612c1.327,2.861,3.067,5.539,5.24,8.019c2.048,2.333,4.449,4.18,7.19,5.562
c2.737,1.385,5.924,2.075,9.552,2.075c2.726,0,5.099-0.363,7.132-1.069c2.031-0.71,3.674-1.72,4.936-3.023
c1.266-1.302,2.203-2.83,2.814-4.599c0.605-1.755,0.912-3.781,0.912-6.064c0-3.356-0.945-6.488-2.838-9.396
c-1.895-2.9-4.721-5.099-8.463-6.603c-2.561-1.023-5.502-2.151-8.816-3.393c-3.315-1.238-6.173-2.407-8.577-3.504
c-4.736-2.127-8.412-4.915-11.037-8.368c-2.621-3.454-3.935-7.958-3.935-13.514c0-3.195,0.652-6.169,1.954-8.935
c1.298-2.756,3.155-5.228,5.559-7.392c2.283-2.052,4.988-3.663,8.106-4.82c3.115-1.167,6.367-1.748,9.758-1.748
c3.865,0,7.328,0.592,10.387,1.778c3.055,1.18,5.85,2.565,8.365,4.138l2.432-4.022h4.729l0.473,27.869h-4.785
c-0.867-3.198-1.844-6.255-2.934-9.172c-1.082-2.916-2.496-5.56-4.227-7.927c-1.697-2.288-3.768-4.115-6.219-5.475
c-2.441-1.358-5.437-2.04-8.987-2.04c-3.748,0-6.941,1.203-9.585,3.609c-2.645,2.408-3.971,5.347-3.971,8.815
c0,3.633,0.856,6.635,2.552,9.024c1.692,2.387,4.156,4.352,7.396,5.886c2.877,1.38,5.706,2.578,8.495,3.58
c2.776,1.004,5.469,2.081,8.071,3.229c2.365,1.022,4.645,2.187,6.834,3.487C67.448,48.261,69.354,49.776,70.966,51.515z"/>
</g>
</g>
</svg>
So it supporsed to look like just an orange square, but on Chrome, it shows the letter S with slight brownish bordering.
I have been searching for similar issue on web but I got no clue.
I'm guessing that it's generator (Illustrator CS3)'s problem??
I found the solution, but I got much more semantic solution thanks to #PaulLeBeau in comment section, so I put this first.
Sample code: Before
<path style="fill:#EF8200;stroke:#EF8200;stroke-width:0.2;" .. />
1. Remove stroke:#EF8200;, and change the value of stroke-width from 0.2 to none
<path style="fill:#EF8200;stroke-width:none;" .. />
Or.. there were other solutions which I found by myself.
It doesn't look as good as the one above, but I'll lay it here just for the reference to say that it indeed does solve it.
2. Change the value of stroke-width from 0.2 to 0
<path style="fill:#EF8200;stroke:#EF8200;stroke-width:0;" .. />
3. removing stroke:#EF8200;stroke-width:0.2;
<path style="fill:#EF8200;" .. />
I do not understand why Illustrator adds width to the object that doesn't originally have stroke.
Maybe this is bug for the both Illustrator CS3 and Chrome/Browser?
When editing on Illustrator, check that there is no stroke added (see image) on the background you are using
Double click the background and "Stroke" value change it to zero
That's the way I easily removed the stroke that appeared in one of the logos createdenter image description here
Recently I exported a map document from the ESRI ArcMap 10.2.2 to SVG.
I would like to animate this map with css and javascript however the "clippath" polygons that arcmap creates makes it impossible to do so. How would can I get the group "Puerto Rico" to highlight over mouseover.
This is a summary of the code:
<svg width="1008pt" height="612pt" viewBox="0 0 1008 612" enable-background="new 0 0 1008 612" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Puerto_Rico_and_Virgin_Islands">
<g id="state" class="test">
<g id="Puerto_Rico">
<clipPath id="SVG_CP_1">
<path d= coordinates are put in here />
</clipPath>
</g>
</g>
The CSS
<style type="text/css">
.test{
fill: grey;
stroke:#fff;
stroke-width:0.75;
stroke-opacity:1;
fill: orange;
}
#state:hover {
fill: red !important;
</style>
The real code:
visit jsfiddle for the entire code http://jsfiddle.net/jwitcoski/arv4g21f/3/
Using the wikipedia svg map that does not use clippath I was able to get everything to work. http://jsfiddle.net/jwitcoski/y3yhgjjy/9/
The clipPath issue is a red herring. It has nothing to do with why your CSS isn't working.
The reason your sample fiddle wasn't working was for two reasons:
Your CSS was missing a closing '}'. But I am guessing this was just a typo introduced in your fiddle.
The main reason was that your path definition for PR had a presentation attribute for fill.
<path fill="none" ... />
This presentation attribute has a higher priority than the CSS rule because it is more specific and thus over-rides it. If you remove the fill="none", everything works.
Demo fiddle here