I have created this Instagram icon in Illustrator. I am trying to get it to display properly on an HTML page but it's not working properly. After exporting the svg image I copy the svg code generated by Illustrator into my HTML and it scales funny; cutting out some edges and making the strokes much thicker. It appears to be independent of parent element.
Scaling the svg using its height and width property or transform doesn't do anything and the viewBox dimensions match that of the image. Check out the screenshots.
Generated svg code:
<svg viewBox="0 0 22 22">
<g id="Shape">
<path class="cls-1" d="M16,22.2H6.41A6.21,6.21,0,0,1,.2,16V6.41A6.22,6.22,0,0,1,6.41.2H16a6.21,6.21,0,0,1,6.2,6.21V16A6.21,6.21,0,0,1,16,22.2ZM6.41,2.2A4.22,4.22,0,0,0,2.2,6.41V16a4.21,4.21,0,0,0,4.21,4.2H16A4.2,4.2,0,0,0,20.2,16V6.41A4.21,4.21,0,0,0,16,2.2Z"/>
<path class="cls-1" d="M11.2,17A5.78,5.78,0,1,1,17,11.2,5.79,5.79,0,0,1,11.2,17Zm0-9.56A3.78,3.78,0,1,0,15,11.2,3.79,3.79,0,0,0,11.2,7.42Z"/>
<circle class="cls-1" cx="17" cy="5.14" r="1.25"/>
</g>
</svg>
How it looks in the browser:
Related
Our small (16px), circular icons suddenly degraded in quality on chrome with no change to our code or assets. The svgs look fine on a macbook screen, but blur on a monitor. Current running theory is a chrome update, but am looking for possible solutions/fixes. Any information or advice welcome.
example of blurry edges on an icon
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M50,0a50,50,0,1,0,50,50A50,50,0,0,0,50,0Zm0,91.6667A41.6667,41.6667,0,1,1,91.6667,50,41.6668,41.6668,0,0,1,50,91.6667Z"/>
<g>
<circle cx="49.2659" cy="75.9917" r="5.7828" fill="#6d6e71"/>
<path d="M53.7632,63.0029H43.85c0-10.0845,5.03-15.1208,9.0712-19.1674,3.326-3.33,5.5236-5.5311,5.5236-10.2049,0-6.4239-6.9209-6.6089-7.71-6.6089-.3743,0-9.1787.0818-9.1787,7.16H31.642c0-11.2085,9.6047-17.0731,19.0922-17.0731,11.57,0,17.6239,8.3117,17.6239,16.5224,0,8.7764-4.6706,13.4524-8.4225,17.21C56.3524,54.4287,53.7632,57.0211,53.7632,63.0029Z" fill="#6d6e71"/>
</g>
</svg>
The problem
I'm trying to crop two images to some triangle shape via clippath, but when I try to move the inline svg code to an external file, only the fp clippath applies to the image. The image with the sp path disappears completely.
Please note that I'm using Firefox and therefore cannot use pure css and the clip-path: polygon() style.
The SVG code
<svg xmlns="http://www.w3.org/2000/svg" height="0" width="0">
<defs>
<clipPath id="fp">
<polygon points="0 0, 100 0, 0 100"/>
</clipPath>
<clippath id="sp">
<polygon points="100 0, 100 100, 0 100"/>
</clippath>
</defs>
</svg>
The working fiddle
This fiddle works because it's inline SVG. Try to move it to a separate file and refer to it in the css. It won't work.
https://jsfiddle.net/qkqovjmq/4/
I solved it by using the jQuery clip path plugin which renders all clip paths correctly.
I have tried to use svg image as background-image in css. And I have faced with strange behavior. Element that has svg background has strange transparent line around.
In the example below it is shown as line between the first and the second div. Size of the line changes depending on width of the element.
http://jsfiddle.net/mahnunchik/g1ux4e7o/
Screenshot from jsfiddle:
It reproduces at least in Chrome 37 and FF 32 on Windows and Linux
Svg image is quite simple:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 76" enable-background="new 0 0 1920 76">
<path fill="#DE4943" d="M0 76L1921 0 0 0z"/>
</svg>
Any idea how to fix that? Or how to explain that?
Try adding preserveAspectRatio="none" to your <svg> element.
Also you don't need the enable-background attribute.
Try to add stroke-width="0" to the path
This is my first time using SVG so apologies if this is a stupid question but I am trying to create a clickable continent map on my site and have acquired an SVG image with the continents mapped out correctly from wikipedia.
http://commons.wikimedia.org/wiki/File:Continents.svg
However, this image is 585 x 299 pixels and I require an image that is 292 x 137 pixels. I've read online that these images are scalable and that all you need to do is modify the width and height value in the svg definition so I have done so here:
<svg width="292" height="137" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
However, this only scales the canvas as such and does not scale the internal areas. How do I get the areas to scale to the modified dimensions of the image?
The SVG will be any size you tell it to in the CSS
JSfiddle Demo
CSS
svg {
width:292px;
height:137px;
border:1px solid grey
}
This works with or without the dimensions stated in the SVG. the important item is the 'viewbox' which sets the co-ordinate structure for the SVG.
The only way I have found so far is to wrap all of my areas in a tag and they apply a scale of
<g transform="scale(0.68)">
Use a viewBox like this :
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.0"
width="292pt" height="137pt"
viewBox="0 0 468 239"
preserveAspectRatio="xMidYMid meet"
>
<g
transform="translate(0,239) scale(0.016963,-0.016963)"
fill="#000000"
stroke="none"
>
http://jsfiddle.net/Vac2Q/4147/
Add a viewBox attribute (viewBox="0 0 585 299" is probably what you want) to the svg element. We can simulate what that would look like by using a fragment identifier which will impose a viewBox on the original file e.g.
http://upload.wikimedia.org/wikipedia/commons/9/95/Continents.svg#svgView(viewBox(0,0,529,290))
That sure displays differently in Firefox.
I'm trying to embed several .svg-files on my website.
Everything seems to work perfectly fine as long as I use Chrome, Firefox or any Mobile browser I've tested so far. However, there's one exception: Whenever I view a svg on my Windows Phone (Internet Explorer Mobile) the image gets distorted.
I guess I found the reason for this behavior already: Since I want the size of any svg to be fluid, I gave them a percentage-based width and an auto-height. This works, as mentioned before, fine for most browser. Internet-Explorer however, seems to ignore height:auto thereby stretching the svg to it's maximum heigth.
That said, one solution would be to assign fixed dimensions for every single .svg.
But that would sacrifice the idea of a responsive design.
Has anybody an idea what the problem might be?
Oh, an here's the link to a page of my website featuring a svg (the black "star" saying "select"):
http://alexanderschlosser.de/select.html
Many thanks in advance!
Alex
EDIT: That's the code of one of the embedded SVGs.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!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="90px" height="90px" viewBox="0 0 90 90" enable-background="new 0 0 90 90" xml:space="preserve">
<path fill="#E64132" d="M45,87.25C21.703,87.25,2.75,68.297,2.75,45S21.703,2.75,45,2.75S87.25,21.703,87.25,45
S68.297,87.25,45,87.25"/>
<path fill="#FFFFFF" d="M45,5.5c21.78,0,39.5,17.72,39.5,39.5c0,21.78-17.72,39.5-39.5,39.5C23.22,84.5,5.5,66.78,5.5,45
C5.5,23.22,23.22,5.5,45,5.5 M45,0C20.147,0,0,20.147,0,45c0,24.853,20.147,45,45,45c24.853,0,45-20.147,45-45
C90,20.147,69.853,0,45,0"/>
<path fill="none" stroke="#FFFFFF" stroke-width="5.5" stroke-miterlimit="10" d="M67.08,45c0,0-7.193-13.292-22.08-13.292
S22.92,45,22.92,45S30.113,58.292,45,58.292S67.08,45,67.08,45z"/>
<path fill="#FFFFFF" d="M50.433,45c0-3-2.433-5.433-5.433-5.433c-3,0-5.432,2.433-5.432,5.433S42,50.433,45,50.433
C48,50.433,50.433,48,50.433,45"/>
</svg>
If you want to have some responsive SVG's add this new attribute to the svg tag:
preserveAspectRatio="xMinYMin meet" <----- take notice of the capitalization
you dont need the width and height attributes anymore, they should now responsively conform to the size of the container they are in (though you might need to define the size of the container because sometimes chrome will render extra white space below an svg if not defined).
edit: defining the width and height of the svg in css works too
Here's a fiddle