I'm exporting svgs from figma and unite in svg stack to adress later using icons.svg#ID.
Html code is: <img src="icons.svg#logo" class="svg-logo-dims"/>
Class "svg-logo-dims" sets width and height, for example: width: 20px; height: 20px for img. Why my svg doesn't cover 20x20? It's centered in img element with a lot of free space. I have to object-fit: cover to make it look like in figma layout.
On the other hand if i insert raw svg in my html, specifying same width and height it would be really 20x20 without free space.
svg markup (deleted other svgs):
<?xml version="1.0" encoding="utf-8"?><svg viewBox="0 0 354 519" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style>:root>svg{display:none}:root>svg:target{display:block}</style><svg fill="none" viewBox="0 0 20 20" id="logo" xmlns="http://www.w3.org/2000/svg"><path d="M18.01 5.694a9.092 9.092 0 01-3.718 12.316 9.053 9.053 0 01-5.352 1.02A9.097 9.097 0 015.694 1.976a9.07 9.07 0 018.06-.266 9.055 9.055 0 014.256 3.984z" stroke="url(#hpaint0_linear_0_497)"/><defs><linearGradient id="hpaint0_linear_0_497" x1=".756" y1="8.723" x2="20.965" y2="9.992" gradientUnits="userSpaceOnUse"><stop offset=".288" stop-color="#555248"/><stop offset=".78" stop-color="#1B1A17" stop-opacity="0"/></linearGradient></defs></svg></svg>
It seems i found a solution. Gulp-svg-sprite possible has an error. It adds viewBox of first underlying svg and sets it to whole svg tag:
<?xml version="1.0" encoding="utf-8"?><svg viewBox="0 0 354 519" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style>:root>svg{display:none}:root>svg:target{display:block}</style><svg fill="none" viewBox="0 0 354 519" id="ads-bg-ico"...</svg></svg>
After deleting duplicating viewBox from parent svg element, all underlying svgs inside parent svg become to work properly and fill img element.
UPD: with release of svg-sprite 2.0.0 rootviewbox: false option added
Related
here is the code where i m going to add the svgpicture but i m getting black image
new Container
child: new SvgPicture.asset('assets/camera.svg')
),
this is mine camera.svg file
<svg xmlns="http://www.w3.org/2000/svg" width="13.607" height="13.608" viewBox="0 0 13.607 13.608">
<defs>
<style>
.cls-1{}
</style>
</defs>
<g id="Group_5" data-name="Group 5" transform="translate(-57.8 -130.498)">
<g id="Group_4" data-name="Group 4">
<g id="Group_3" data-name="Group 3">
<path id="Path_2" d="M69.415 139.294a6.792 6.792 0 0 0-2.586-1.621 3.933 3.933 0 1 0-4.452 0 6.814 6.814 0 0 0-4.577 6.433h1.063a5.741 5.741 0 1 1 11.481 0h1.063a6.763 6.763 0 0 0-1.992-4.812zM64.6 137.3a2.87 2.87 0 1 1 2.87-2.87 2.874 2.874 0 0 1-2.87 2.87z" class="cls-1" data-name="Path 2"/>
</g>
</g>
</g>
</svg>
This is probably happened because of the corrupted SVG files from the internet. I faced this problem earlier and tried many ways to solve it. But finally, I solved it with the help of this software, svgcleaner.
Download the application into your OS, from here
After installation,
import your SVG.
Click run.
Success! Here you can see your SVGs' cleaned successfully.
After cleaning, you can grab those SVG files from the output folder location and add those files into your flutter app without seeing any black coloured SVG.
It works perfectly fine for me.
flutter_svg can not understand Internal or Embedded CSS.
Hence you need to remove the internal css and write inline css.
Example:-
<path style="fill:#566e83;" ...
Use https://vecta.io/nano
It can remove the unsupported tags such as and compress the svg file at certain level
this is cause of inline css .....
<style>
.cls-1{}
</style>
remove this lines and try ... your problem will be solved... flutter svg cant read inline CSS
Edit the style like I did below in order to change the color:
<svg xmlns="http://www.w3.org/2000/svg" width="13.607" height="13.608" viewBox="0 0 13.607 13.608" style="fill: #ff0000;">
<defs>
<style>
.cls-1{}
</style>
</defs>
<g id="Group_5" data-name="Group 5" transform="translate(-57.8 -130.498)">
<g id="Group_4" data-name="Group 4">
<g id="Group_3" data-name="Group 3">
<path id="Path_2" d="M69.415 139.294a6.792 6.792 0 0 0-2.586-1.621 3.933 3.933 0 1 0-4.452 0 6.814 6.814 0 0 0-4.577 6.433h1.063a5.741 5.741 0 1 1 11.481 0h1.063a6.763 6.763 0 0 0-1.992-4.812zM64.6 137.3a2.87 2.87 0 1 1 2.87-2.87 2.874 2.874 0 0 1-2.87 2.87z" class="cls-1" data-name="Path 2"/>
</g>
</g>
</g>
</svg>
First using the svg image you have provided I'm getting the following an error on the console
I/flutter ( 7705): ══╡ EXCEPTION CAUGHT BY SVG
╞═══════════════════════════════════════════════════════════════════════
I/flutter ( 7705): The following UnimplementedError was thrown in
parseSvgElement: I/flutter ( 7705): The element is not
implemented in this library.
You can remove this section on the image to resolve that issue:
.cls-1{}
Second, the image is being displayed properly, just verify you have added the proper assets registration on pubspec.yaml file, as follow.
assets:
- assets/camera.svg
Which means you have a folder called assets at a root level.
Third the image is not a camera picture is just like a person icon.
Use as follow and you will see:
Container(
height: 120.0,
width: 120.0,
color: Colors.yellow,
child: SvgPicture.asset('assets/camera.svg'),
)
I put a Yellow color background to show a better result.
Hope this help.
Even I faced this problem in flutter, the problem is with the SVG file and I cleaned the SVG file using this website https://jakearchibald.github.io/svgomg/ and it worked well then.
Nothing you have to do buddy! just open that svg file in your android studio. and remove style attribute from there.
Please follow below steps to resolve this error:
copy your svg picture code.
convert your svg code to inline CSS using this tool css-inliner
paste your new svg code to the existing svg file
restart the app, this will resolve your problem.
This is because the flutter_svg package does not render the internal CSS of your svg code.
Any solution, why IE and Chrome will be show my svg-sprite, but Firefox prefers to show nothing. There will be the place for the icon and on source code it will be showen, but it seems that firefox doesnt render it.
I include the svg and call the icom by this way
<svg class="icon icon-spoon-knife" viewBox="0 0 16 16">
<use xlink:href="/adminCSS/pic/sprite.svg#icon-spoon-knife">
</svg>
Again, chrome and IE show it, firefox wont...
Hope you can help!
Thank you
Try adding a width and height to your svg tag or CSS. I believe Firefox's table-cell sizing algorithm sets it to 0px × 0px if it's not declared.
<svg class="icon icon-spoon-knife" width="16px" height="16px" viewBox="0 0 16 16">
I am constructing an svg using D3.js. Inside it I am using <image> to place two types of images img1 and img2 where both have same width W but img1 is shorter than img2 i.e. H1<H2.
They should be placed within the outer svg in a rectangle with dimensions WxH2 at position (x,y) and the shorter one (img1) should be aligned vertically at the bottom of this rectangle like this:
This sounds like a job for viewBox & preserveAspectRatio so I tried creating a nested <svg> element with dimensions WxH2 (the larger of the 2 heights) at position (x,y) and depending on the image dynamically added each time, the layout (here shown with both images) would be:
Sample code with W=35, H1=19, H2=88, x=100, y=200:
```
<svg...> <!--outer SVG-->
<svg width="35" height="88" x="100" y="200" viewBox="0 0 35 88" preserveAspectRatio="xMidYMax meet"> <!-- nested SVG-->
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img1_OR_img2" width="35" height="CORRESPONDING_img_HEIGHT"></image>
</svg> <!-- end of nested SVG-->
</svg> <!-- end of outer SVG-->
```
The problem is that the height of the nested svg is ignored and it's the height of the <image> that defines the height of the rectangle. So no matter what vertical alignment I ask for through preserveAspectRatio in the nested svg, in the case of the shorter image img1 it will not make a difference since the rectangle is already the height of the img1. If I have <image> always have the larger height H2, then the smaller image img1 appears vertically aligned in the middle.
Should I be using a whole different substructure instead of a nested svg or am I misusing the viewBox/preserveAspectRatio combo?
Note: regarding the topic viewBox & preserveAspectRatio, I used this article which is the best I've found online so far (kudos to Sara for an amazing article).
Your problem is that you are changing the heights. In both cases you should be using 88 for "CORRESPONDING_img_HEIGHT". You need to use the same viewport for both images and let SVG position the image within the viewport according to the preserveAspectRatio setting.
In fact, you don't need to be using nested SVGs. The <image> element also has a preserveAspectRatio attribute.
<svg xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="100" y="200" width="35" height="88" xlink:href="img1" preserveAspectRatio="xMidYMax meet"/>
<image x="100" y="200" width="35" height="88" xlink:href="img2" preserveAspectRatio="xMidYMax meet"/>
</svg>
I have an SVG file which contains about 50 embedded images. Now I wish to flip all the images vertically. The only way i found that does this is:
Copy the xlink:href to a browser and download the image
Flip the image in any image editor
Convert the image to a href code
Replace the xlink:href with the one newly generated
I don't want to use any SVG programs please, I hope for a coding help
Example code
<svg contentScriptType="text/ecmascript" zoomAndPan="magnify" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svg="http://www.w3.org/2000/svg" baseProfile="full"
contentStyleType="text/css" id="svg2" version="1.1" width="460pt" xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#" preserveAspectRatio="xMidYMid meet" viewBox="0 0 460 130" height="130pt"
xmlns="http://www.w3.org/2000/svg">
<image x="0" y="0" width="460" xlink:href= "data:image/png;base64,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"
id="image6418" height="130"/>
Add transform="scale(1, -1)" to the images. You may need to translate them back if they aren't centred round the origin. So in the case above you want to add this to the image element:
transform="translate(0, 130) scale(1, -1)"
I embedded an SVG object in an HTML page as follows:
<embed id="svgImg" src="bo5rkbgs5vtsmv053regld2t14.svg"
type="image/svg+xml" />
However, the resulting image (both on Firefox and Chrome) is trimmed and it look like that:
(Notice how "Step Response" and "Time" do not appear properly). I have checked the file on the server side and it is fine. Any ideas?
Having had a second look at your code your svg image is still too small.
You need to set the height to 100% and the image height to 500px.
<embed id="svgImg" height="100%" type="image/svg+xml" src="s1d5ckv8bojltpturlonh1uap5.svg">
<svg width="576" height="500" viewBox="0 0 576 432" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
....
This fixes the problem in firefox v8.0
Just tweak your viewBox attribute so that it fits your image.
For example, you could try this:
viewBox="-10 -10 596 452"
Update:
To generate the viewBox dynamically with JS, something like this should work:
var bbox = document.documentElement.getBBox();
var viewbox = document.documentElement.viewBox.baseVal;
viewbox.x = bbox.x;
viewbox.y = bbox.y;
viewbox.width = bbox.width;
viewbox.height = bbox.height;
Note that this needs to be done on the svg document, so you may need to reach into it from the html document that embeds it, if so have a look at this example.