I am using the flutter svg package and it doesn't support the <style> element that Illustrator exports an SVG with.
Is there a way I can convert this SVG to embed these styles into their respective elements? The style tag has a bunch of classes like cls-1, cls-2, etc.
Otherwise is there a way I can export an SVG without the <style> tag in Illustrator?
Without going the conversion route, I've found a simple solution regarding Illustrator. When you export to an SVG, the dialog box that shows has a dropdown that let's you select Inline Attributes. This works with the flutter svg package perfectly.
Related
I am trying to style elements of SVG using CSS. I used iframe in my index.js file to reference my SVG, and the SVG displays fine. However, my CSS styling didn't apply as it would have had I just copy/pasted the SVG contents into my index.js. The contents are stored under an object #document. How do you reference iframe contents using CSS?
Are you using an <iframe> or an <object>? Your title says the former, but your questions suggests the latter.
Assuming you really mean an <iframe>. Then the answer is: you can't. CSS does not work over document boundaries. So you can't style the contents of an iframe from the page that contains the iframe. The content of the iframe is a separate file (the SVG file).
If you want to style the SVG, then you will need to put the CSS in the SVG (using a <style> element), or reference the CSS file using the XML way of including style sheets:
<?xml-stylesheet href="common.css"?>
See: https://www.w3.org/TR/xml-stylesheet/
Assuming your svg is on the same domain, you could append a stylesheet after loading via js:
let svgIframe = document.querySelector('.svgIframe');
if(svgIframe){
svgIframe.addEventListener("load",function(e){
let svgDoc = svgIframe.contentDocument;
let iframeSvg = svgDoc.querySelector('svg');
let css = document.createElementNS("http://www.w3.org/2000/svg", "style");
css.textContent = 'path{fill:red;}';
iframeSvg.appendChild(css);
});
}
I've been using Figma a lot lately to draw / edit images and export them as SVG files so I can quickly use inside my apps' code bases.
There's just one drawback with that: Looking through the SVG code to find out what element is what.
Up to this moment I'm having to go through the SVG manually in order to mark the elements (with classes or ids) so that I can manipulate them properly via CSS or Javascript, what's quite tedious :-/
It would be really convenient to be able to set an id or a class to each element (path, line, circle etc..) via Figma and have it reflected in the exported code, I strongly believe that there must be a way to do so...
So here I ask: Is there a way to set certain CSS **class** or **id** atribute in Figma and have it declared on the svg code that gets exported?
There's a checkbox "include id attribute" in the export section.
It inserts the element's layer name as the id attribute on the resulting svg tag.
yay š
I am working with Vue.js and try to place some SVG Icons I made in Illustrator for my Webapp. I loaded the icons with Webpacks "require". It is not possible to access the svg's with their source (src attribute of img tag) so we insert them with vue like that:
<div class="section-icon" v-html="getIconForEvent(event)"></div>
This displays the right icons at the right place, but I ran into some problems with this approach.
The SVGs are all styled with a style-tag within the svgs. So the last SVG overwrites the style of all previous SVGs because they somehow all have the same class. In the Chrome Devtools this looks like
this.
What can I do to not let the style of SVGs overwrite each others classes? I didnt put the style tags there myself, those are just the style that the SVG had itself. Thanks!
There is nothing you can do other than modifying the class names in each SVG so that they don't clash.
It looks like you are using Illustrator to produce those SVGs. To work around the problem, make sure you tell Illustrator, when you save the SVG, to not use <style> elements for element styling.
When you save, use File > Save As > SVG, then click on "More Options" and change the "CSS Properties" setting. If it is set to "Style Elements", change it to one of the other options. If you do that, it won't use classes and your SVGs won't clash with one another.
To fix your current SVGs, you should be able to load them in, then resave them using the method above.
Try targeting them via CSS using children:
.cls-3:first-child {
fill:yellow;
}
.cls-3:nth-child(2) {
fill:red;
}
...
.cls-3:last-child {
fill:blue;
}
Fill with what colors you need to see if it works. If that does not overwrite it, you may need to use !important, although it is not a best practice, rather a worst case scenario.
This question already has an answer here:
CSS Transitions and transforms on SVG elements
(1 answer)
Closed 8 years ago.
I've created an illustration in Adobe Illustration, which I want to use on a webpage. I also would like to add some CSS transitions to a few items in the illustration. Those items consist each of multiple Illustrator layers.
To add CSS to such thing, I would think of a SVG format file. The problem is: How do I add CSS (transition) to a certain item from a SVG file, instead of the whole file itself?
When I check the uncompressed SVG code, I do see thinks such as <g id="Guitar"> and other items with ID's.
Based upon that, I would think of #guitar:hover { transform:rotate(4deg);transition: all 0.4s ease;}
But I'm unsure about that.
I hope for some feedback. Thanks!
Yes, you can do this. There are three things you need to take into account though:
If you want to target SVG elements with your css, the stylesheet must be inside that SVG, like here
If the svg is loaded using an IMG tag, you can always target the IMG itself. If that SVG contains css files though, they will not apply since an image has to be loaded in a single request, so loading a SVG file that it iself loads a CSS file using an IMG tag, the styling will not work
If you load the SVG as a background image, the browser handles it as an image file, not as an SVG document. So things like :hover, :focus and :active will not work
You can style the SVG elements using the same CSS selectors you would normally use for HTML
Here is a demo SVG file. Please use Firefox for viewing because currently it seems to be the only properly showing browser.
The task is to construct a pure SVG document (e.g. not html-embedded) that will be able to show tooltips using only CSS features (no JS and also no :before/:after pseudo-elements). I managed to achieve this by using the HTML foreignObject element.
However, I can not find if it is possible to position such elements in relation (e.g. 10px to the left and top from it) to other in-document SVG objects without using JavaScript for it and without embedding the SVG file itself into some other document format (e.g. HTML).
In the final version of the file there will be 20-30+ tooltips, so it is desirable to avoid manual positioning. I was hoping there would be something for "attaching" them to other objects (withthe use of their IDs) or at least to their parent objects, but my search results only return documentation and questions regarding JS or HTML implementations.
add. notes:
1) CSS-only SVG file is required because the file is intended to be used on wiki sites, which prohibid SVGs that have javascript in them.
2) If I understand correctly, displaying HTML formatting in HTML foreignObject element is not a current SVG standard requirement for SVG user agents (i.a. web-browsers). However, Firefox seems to properly display them, and Iād rather use that (even not fully supported) opportunity. If I am missing some easier ways of achieving the same thing ā please do tell about them.
3) SVG code backup: pastebin.
Unfortunately, you can't achieve this effect using just CSS because positions in SVG are attributes, not styles.