I am composing one SVG out of N other SVGs that are given by users by adding all of the SVGs into one container.
The issue is that when the different SVGs have inline <style> elements which define the same class names, the browsers seem to load them like normal CSS where each declaration overrides the previous ones.
For instance if SVG 1 has a class name "st0" and SVG 2 has a class name "st0", both will use the second one.
Due to this, my idea for now is to, for each SVG, iterate over all of the nodes, find <style> nodes, parse the CSS using some library, add some unique identifier to all class names, add the same identifier to all attribute class names in the SVG, and then the rest is normal.
I am mostly wondering if there is some easier way to do this with SVG.js, because I couldn't find anything so far and it's quite hard to see what's even possible because the TS information is missing in a lot of places.
Related
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 🎉
This question already has answers here:
What's the difference between an id and a class?
(17 answers)
Closed 7 years ago.
<div id="stockexchange-id" class="stockexchange-class">Text</div>
In the example above I added both a class and an id into the div statement. Is there a difference between them? If I call .stockexchange-class CSS instead of #stockexchange-id CSS does it make any difference? If it doesn't then what it the point of having both of them? Also which one would be better to use?
The biggest difference is that a document can have multiple elements with the same class, but not with the same ID. An Identifier must be specific to a certain element within a document (i.e. full HTML page).
When applying CSS styling, some experts have recommended using classes over IDs to avoid specificity wars. CSS Lint (http://csslint.net/) recommends this.
The reason is that stylesheets are read from top to bottom, but IDs take precedence over class. This means that:
#stockexchange-id {
color: blue;
}
.stockexchange-class {
color: red;
}
Would color the text blue, even though red comes later. Here's a good graphic explaining specificity: https://stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg.
If everything has the same specificity, and most styles are applied via a single class, it makes the CSS easier to reason about, since it will read from top to bottom without extra styles being mixed in different orders. It also makes it easier to override classes, which can be useful.
Finally, if you style based on classes, you can re-use the styling on the same page by applying the class to another element on the page. With IDs, since they are unique, you cannot do this. Even if you think an element is unique on a page (e.g. a Buy Button), this may not always be the case. A designer may request the same element again later in the page.
You can only use an ID name once in any XHTML or HTML document. Duplicate ID tags will cause your page to fail validation, and can have negative effects when using JavaScript with them. Simply put, an ID is like the sticker that says "you are here" on a mall directory, and there can only ever be one of those.
Classes, like ID's, can also be used to in JavaScript scripts, but unlike ID's, they can be used multiple times in the same HTML document. This separation of content from presentation is what makes sites powered by CSS more robust, but some don't know the full extent to which they can use classes.
I'm wondering if I can create multiple "brushes" in a single SVG file and use them thoughout my CSS.
Right now I have a single SVG file that has a gradient stored in the "defs" and a single rectangle that draws it. Then I use this SVG file as a background image in my CSS. It works well but I'd rather not have a million separate SVG files. I'd like to combine like "brushes" together in a single SVG file something like CSS sprites or XAML is capable of.
Is there a way to do this? If so what's the syntax to specify for the CSS background image which SVG element from the svg file to use?
Thanks for any help.
In theory yes, that should be possible. It's not yet fully defined in a w3c spec though and the implementations do differ at this stage.
Note that svg itself allows a special fragment syntax, so in theory you should be able to link to different views of the same svg file. That could be used to do CSS/SVG sprites.
Linking directly to the id of a nested svg fragment (or to any other element inside the svg) is something that would need to be further specified.
Assuming that linking with fragments from a CSS background property works, then a possibility if you use XHTML (serving the resulting file as application/xhtml+xml) is to just include the svg resources inline in the main document, eliminating the need for many separate files. This can be done as a pre-publishing buildstep if you wish to keep the svgs separate for editing. Another possibility is to use data uris.
I'm also seeking for the same, and here are the pointers I could find:
17.3 Linking into SVG content: IRI fragments and SVG views (w3.org)
SVG Stacks (simurai.com)
Can I use SVG fragment identifiers? (caniuse.com)
Better SVG Sprites With Fragment Identifiers (broken-links.com)
According to caniuse.com, there is an issue with browser support, but that does not prevent you to try and observe future browser evolution (in the hope a future day they will all support this obvious feature).
If we keep tag name within selectors.
For example:
#divMainContentBody { … }
.spanImportant { … }
This minimizes the need to switch between your stylesheet and your markup, since the ID and class already tells you what element type it is referring to.
Updated after #Guffa's answer:
I found this advise in this book also http://answers.oreilly.com/topic/647-how-to-write-efficient-css-selectors/
Don’t qualify ID selectors
Because there is only one element in the page with a given ID, there’s
no need to add additional qualifiers.
For example, DIV #toc is unnecessary
and should be simplified to #toc.
Don’t qualify class selectors
Instead of qualifying class selectors for specific tags, extend
the class name to be specific to the
use case. For example, change LI
.chapter to .li-chapter, or better
yet, .list-chapter.
Prefixing identifiers in this was is called hungarian notation, and is used for aspects of identifiers that is considered crucial for their use.
In most cases I don't think that the element type is important enough to make it into the identifiers in the CSS. If the names are chosen well you should already be able to determine the important information from them.
If the element is important, you could use it in the selector instead of putting it in the identifier. That way the selector will actually only work with that element:
div#MainContentBody { ... }
span.Important { ... }
In my view, this may not be the best practice as using location-dependent styles or "trending" your CSS towards a location-based pattern (i.e. "this can only be used for a span", "this is only for a div") force you to create a 1:1 relationship between your HTML elements and your CSS classes.
CSS classes are appropriately-named since - just like in OO programming - you can have your CSS classes inherit from each other. To this end your better approach is to keep to a meaningful naming convention (as you've already suggested), but write classes that are modular and can be extended.
The upshot of this is that you can then use one class in a large variety of different ways and places without having to continually override behaviours in your style sheets. This keeps your styles more predictable and your CSS much more maintainable.
Read more about it on http://wiki.github.com/stubbornella/oocss or SlideShare.
<div id="SideBar" class="sidebar mainbar">
I've just seen this in a .aspx file. Is this valid? Can someone point me in the right direction to learn what this does. I'm assuming its valid, but I'm not finding it in the css file. I am finding sidebar defined as a class, but not mainbar.
Thanks in advance,
Randy
This div just has two classes, which means it will get the properties defined under .sidebar as well as those under .mainbar
Sure, you can have an element implement as many css classes as you like. If there is no class defined in the CSS files it is possible that either:
The additional css classes have been removed from the styles sheets and the .aspx pages have not been refactored to match.
The css class is been used to identify the element(s) via javascript or some other scripting language.
As for mainbar not showing up in your CSS file, sometimes developers assign classes to elements and then reference those classes in javascript.
Yes this is perfectly valid. An element can be styled by multiple classes.
See this reference and this one which touches on which one takes precedence for duplicate style attributes.
CSS Tricks has a few other CSS tricks including having two classes.
Copy/Pasting the trick from the above site:
Usually attributes are assigned just one class, but this doesn't mean that that's all you're allowed. In reality, you can assign as many classes as you like!
Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both text and side. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.
Beware of IE6 if someday you try to style an element using more than one class, it doesn't work like intended.
Googling "multiple classes ie6"
test case
No problem with id+class (like #anid.class ) or two selectors like .classA and then .classB but no .classA.classB