Hello everyone,
I don’t know if I’m doing something wrong, but after having the export done, checking the code i noticed that some element’s style are written in the html code and some in the css.
Is there any option for exporting the style only in the css?
I’m sorry, I’m not a devoleper, I’m just the designer, and I’m a complete ignorant.
Thanks
Hi Tad,
Welcome to the forums. All the styles should be written in the style declaration unless you have the set Styles Inline option checked. Check if that option is checked.
However, recently there has been a change to how graphics elements are exported (SVG elements). The styles are applied as attributes. This is because of style inheritance rules and a few other reasons. With HTML elements any styles defined inline take precedence over a ID or class selectors. But with SVG that’s not the case. If you have an ID or Class selector for an SVG element it’s styles will override the attributes.
In the SVG rect below the rect has a red fill. But we have a class named element1 that has a green fill that overrides it:
This change was made to support easily adding hover effects. It’s also this way because some SVG styles / properties cannot be applied via a style declaration.
So styles applied as attributes to the SVG are setting the “defaults” where setting styles in a style tag on a HTML elements already have defaults and are thus defined a set of values that are higher in specificity than classes or IDs.
There are a few books on the subject that explain the style inheritance chain in more detail. I’ll add the other one soon.
SVG Essentials by O’Reilly
I might make it a settable option in the future as to where styles are defined if there’s interest.
Web Export is for designers and developers both. It’s for anyone that wants to put a web page online. It is designed to allow you to learn as needed. The more you put into it the more you’ll get out of it. And there are many places you can ask for help including here.
