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
Related
Edit: this questions is irrelevant in case you're using Font Awesome v. >= 5.8.0 because its maintainers (after a long discussion:)), agreed that the "title" should be removed from the svg files and it's done in v. 5.8.0 : https://github.com/FortAwesome/Font-Awesome/issues/14595
Now, back to the original question:
I just tried the Font Awesome (5) in its 'svg sprites' version, following the official, pretty simple tutorial: https://fontawesome.com/how-to-use/on-the-web/advanced/svg-sprites
Everything's working as expected, except I can see a title popping up when I hover on the image (which is bad). I mean the one we see when we have e.g. <div title = "blah"></div>.
So, in compliance with the docs (I guess), I have copied the 'sprites/regular.svg' file to my server and:
<svg class = 'fa-svg-icon' title = 'my failed attempt to overwrite the title'>
<use xlink:href="icons/font-awesome/sprites/solid.svg#user"></use>
</svg>
The '.fa-svg-icon' class, for the sake of completeness:
.fa-svg-icon{
width:1em;
height:1em;
}
What I see, when hoovering the image, is a title "User" showing up. That's is because this is what is declared in the svg file, in "our" fragment:
<symbol id="user" viewBox="0 0 448 512">
<title id="user-title">User</title>
<path d="M224 256c70.7 0 ......"></path>
</symbol>
I tried adding title = 'something' to both the svg element, and the <use> one, but nothing works o.O
This happens on both FX and Chrome.
Edit 1: I made a test page: https://kpion.github.io/stuff/font-awesome-issue/
I'm pretty sure I'm missing something obvious here, because apparently I'm the only one in this world having this problem 😮 Or google is broken. One or the other :)
Edit 2:
To answer a question from comments, here is what my dev tools -> elements in chrome shows (after 'importing' the svg symbol):
<svg class="fa-svg-icon" title="my -not-working-title for user">
<use xlink:href="icons/font-awesome/sprites/solid.svg#user" title="blah - doesn't work either"></use>
#shadow-root (closed)
<svg id="user" viewBox="0 0 448 512" width="100%" height="100%">
<title id="user-title">User</title>
<path d="M224 256c70.7 0 128-57.3 128-..."></path>
</svg>
</svg>
And no, it does not change when hovering, please bear in mind there is no js involved, either mine or from font awesome.
I'm not able to recreate your code environment in a fiddle to try it myself, but you may try the following CSS code, to get the pointer-events only when the icon has a link:
.fa-svg-icon{
pointer-events: none;
}
.fa-svg-icon a {
pointer-events: auto;
}
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;}
I have a webpage with lots of SVG icons that will be in the HTML. Rather than include them as an IMG tag and possibly slow the page with those HTTP requests, I'm placing the SVG code like this:
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9"><path fill="#C5C2BD" fill-rule="nonzero" d="M4.5 3.435L1.286.22A...LOTS OF CODE HERE..."/></svg>
Note: where it says "lots of code here", there is a huge string of numbers/letters that make up the path for this SVG.
The issue this creates is it's very ugly when not easily maintainable in the HTML (to the point where my editor bogs own because these SVG strings are so long).
Is there a cleaner, simpler way to include these SVG icons in my HTML while still eliminating the extra HTTP requests?
Thanks for your time.
The most proven way is to collect all the icons SVG in one file - the sprite SVG
Creating a Sprite and connecting it to HTML
The action plan is as follows:
Creating a Sprite
Connecting it to HTML
Calling SVG images from the sprite
Styling icons
Creating a Sprite
The main task of the sprite is to be a repository for icons that before the call to a specific place HTML pages should be invisible.
To do this,the code for each icon is wrapped with <symbol id =" .. "> ... </ symbol> tags with a unique identifier, which will be followed by the <use>
Template Sprite:
<div id="container">
<svg version="1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 126 126" >
<symbol id="picasa">
<path d="M113.5 57.... 72.8z" />
</symbol>
<symbol id="wordpress" viewBox="0 0 126 126">
<path stroke ="black" d="M113.5 57.7l-8.5-11.4 .. 86.1 62.9z"/>
</symbol>
<symbol id="twitter">
<path d="M113.5 57.6l-8.5-11.4.... 7.4-2.4V85.4z"/>
</symbol>
<symbol id="apple">
<path d="M113.5 57.7l-8.5-11.4... 78.5 78.7 82z"/>
</symbol>
</div>
As you can see, all <path> attributes are removed for later styling of icons from an external CSS file.
Adding a sprite file to HTML
There are several ways to add SVG files to HTML, but the most reliable way is to add it using the <object>
<object type="image/svg+xml" data="Sprite.svg" width="200" height="200">
Your browser does not support SVG
</object>
Adding icons from the sprite
<div id="container">
<svg viewBox="0 0 126 126" >
<use xlink:href="#apple"></use>
</svg>
</div>
The viewBox attributes should be like thesvg icon or change the scaling inside HTML if necessary.
Icons as links
For this, in SVG, unlike HTML, its own form of record
<svg viewBox="0 0 126 126" >
<a xlink:href="https://www.apple.com/ru/"><use xlink:href="#apple"></use></a>
</svg>
Styling icons
When using the <use> command, the icon falls into the shadow DOM and its attributes behave strangely, - there is an icon of the icon, but it can not be controlled from the outside.
In addition, the icon attributes for example: style = "fill: gray; stroke: crimson;" have the highest priority. Therefore, we deleted these attributes. see the example of the sprite above.
To solve the problem of inheritance of parental properties by objects in shadow DOM, you must use forced inheritance
svg path{
fill:inherit;
stroke:inherit;
}
and then to the icons you can already apply CSS rules from the external table
svg path:hover{fill:yellow;}
#picasa{fill:black;}
#apple{fill:purple;}
#twitter{fill:black;}
#wordpress{fill:blue;}
If you go for the first time along this path, then inevitably there will be many questions.
Ask, do not be shy.
All sooner or later it turned out to be done and customized sprite.
The main recommendation is to do everything yourself manually for the first time, to understand how it is arranged, and then you can already openly use special utilities to automatically create sprites.
You should convert all your .svg files to one font file, here is how:
How to convert .svg files to a font?
I'm trying to use an SVG to mask an image.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width=500 height=300>
<defs>
<clipPath id="clip">
<path d="M2.16,1.363h23.699c13.739,0,24.899,10.74,24.899,23.999s-11.16...
<img width="500" style="clip-path: url(#clip);-webkit-clip-path: url(#clip);" />
It works but I want the clipPath size to match the media. In Chrome I can control the size of the clipPath with CSS but in FF the clipPath stays small. In Safari with one asset nothing appears and with another it appears off-center.
I've read other questions that talk about using clipPathUnits:
<clipPath id="clip" clipPathUnits="objectBoundingBox">
But I cannot get this to work at all. Apparently it expects the paths units to be decimals... but my shape is too complicated to write by hand and I don't know of any design software that supports that format.
Update
Following Robert's comments, I tried adding a CSS transform to the clipPath to "translate" the units...
#clip {
-webkit-transform:scale(0.004195862879,0.005554321262);
transform:scale(0.004195862879,0.005554321262);
}
This allowed objectBoundingBox to work as expected in Chrome. But still no luck with Safari or FF. It appears that Safari still renders the clipPath outside the the element to be clipped... making it invisible. FF developer tools make it less clear where it's placing the clipPath.
Run into this problem right now and found the solution. Thanks #RobertLongson for mentioning that when you applying clipPathUnits="objectBoundingBox", you should be sure that all of your coordinates are between 0 and 1. It means, that if you have, for example, a circle
<svg viewBox="0 0 20 20">
<defs>
<clipPath id="clip">
<circle cx="10" cy="10" r="10" />
</clipPath>
</defs>
</svg>
then with clipPathUnits="objectBoundingBox" it should looks like this:
<svg>
<defs>
<clipPath id="clip" clipPathUnits="objectBoundingBox">
<circle cx="0.5" cy="0.5" r="0.5" />
</clipPath>
</defs>
</svg>
In case of complex paths, I found one solution. All you need is an application for vector images editing. For Linux it could be Gravit Designer (I used it and it worked).
Create new file of size 1x1
Open you svg that contains your complex path without clipPath tag. If you don't have such source, then you can simply create new text file, paste your <path .../> into <svg>...</svg> and save it with *.svg extension, and then open it in your application (Gravit Designer).
Copy your complex path from opened svg and paste it into created new file (1x1).
Turn off "Preserve aspect ratio" (or something simillar) function if it enabled
Set this parameters for your complex path: Width: 1px, Height: 1px, Top: 0px, Left: 0px.
Save this 1x1 file as svg.
Open this svg file in text editor and copy the value of d attribute.
Now you have your complex path in relative coordinates. Set it into you clip
...
<clipPath id="clip" clipPathUnits="objectBoundingBox">
<path d="/* your copied value */" />
</clipPath>
...
Done! Now you can enjoy your responsive clip path without any additional transformations or other workarounds.
I know, it looks too complicated, but it really will be done in approximately 2 minutes (if you have vector image editing software installed).
Hope this helps someone despite of question was asked 1.5 years ago :)
I was using Adobe Illustrator to try and shrink my vectors down to 1px by 1px, and it wasn't capturing all of the coordinates correctly. I instead found this awesome online tool that will convert SVG path coordinates to CSS clip-path friendly coordinates relative to a "1" unit without needing a vector editing program. The quality is much better than Illustrator and easier to use. 🙌
https://yoksel.github.io/relative-clip-path/
I got a similar problem, I solved it like this:
I transfer the svg file to figma (drag and drop)
I align to a square 100 by 100 (without preserving the sides)
export the file as svg
I upload the file to the service https://betravis.github.io/shape-tools/path-to-polygon/ (not advertising, you can use something else)
I get a clean polygon as a percentage, which can be used in clip-path;
example:
.elem-to-path{
clip-path: polygon(89.758% 99.457%, 67.178% 99.862%, 39.660% 99.621%, 7.748% 98.475%, 5.924% 98.004%, 5.742% 97.859%, 4.348% 92.036%, 1.807% 80.831%, 0.174% 36.869%, 1.052% 1.541%, 1.301% 1.012%, 2.237% 0.790%, 62.832% 0.559%, 78.860% 0.810%, 88.832% 0.810%, 96.913% 1.195%, 98.441% 3.283%, 99.616% 24.932%, 98.813% 86.202%, 96.703% 95.116%, 89.758% 99.457%)}
I have an SVG document here
On firefox, everything works as expected. However, google chrome appears to think this line:
<image ... xlink:href="/textures/Cube top.png" />
references http://minecraft-cube.comuv.com/index.svg,
not http://minecraft-cube.comuv.com/textures/Cube top.png,
resulting in unexpected recursion.
Obviously, I'd much prefer it if it used the image I specify.
What is going on here?
EDIT: Filed bug #68732 in Chrome. May still be doing something wrong though.
I think that your problem exists elsewhere. Here is a simplified version of your document that correctly shows the linked image:
<?xml version="1.0" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" viewBox="0 0 48 84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<g id="top-tile">
<image width="1" height="1" x="-0.5" y="-0.5" class="face"
xlink:href="http://minecraft-cube.comuv.com/textures/Cube top.png" />
</g>
</defs>
<g transform="scale(16)">
<g transform="translate(1.5, 1.5)">
<use xlink:href="#top-tile" />
</g>
</g>
</svg>
If I use absolute paths to your images and remove the clip-path attributes I see your images in Safari and Chrome. If I put the clip-path back in I see all black fill in Safari, but what is presumably correct in Chrome. If you put in absolute paths (e.g. xlink:href="http://minecraft-cube.comuv.com/textures/Cube top.png") does it work for you in Chrome?
Now that I see what you are trying to make, I wish I could give you +2 for making a fold-up Minecraft tile :)
Edit Next Steps:
Remove the space from your file name.
Try using a relative path instead of absolute.
Now that we know better the core issue, Google for more answers (I haven't found any)
Pare it down to a trivial test case and file a bug against Chrome.
Edit 2: As shown in the updated question, #Eric did file a bug against Chrome. As shown in that bug report, newer versions of Chrome display the intended result. Further, a slightly modified test case using explicit pixel-based image height and width, and pixel-based SVG viewBox and dimensions works in all browsers tested.