I want to Embed SVG into XUL. I tried to use the this tutorial which requires pasting of the SVG code in XUL application and it works but this is not clean. I want to keep SVG and XUL files separate, further I will like to use a separate CSS file for SVG part, any examples how we can do this?
You can use xul-overlays:
1) Declare the overlay at the top of your xul file:
<?xul-overlay href="africa.svg"?>
2) Define an empty container svg element inside your xul file and assign the same id to it as to the main svg element in the included file.
<box>
<svg:svg id="mapa" />
</box>
3) Remember to use a separate namespace for the svg part (see svg:svg above) and declare it.
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:svg="http://www.w3.org/2000/svg">
4) Make your svg file an overlay by putting an overlay declaration all around (I'm afraid you have to do this).
<overlay xmlns="http://www.w3.org/2000/svg">
<svg id="mapa">
...
</overlay>
About separate css files: Just create two of them and include them wherever you want - even in the svg overlay.
You might want to look inside a working example - a small geography quiz which I created years ago and just updated yesterday to make it work again in current firefoxes:
http://open-projects.net/~nico/countryquiz/
Just look at the source files!
Related
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.
I have a problem I don't know how to manipulate svg for example how to transform it, if file is in other directory, not in the HTML file.
I attach img how I linked it and my directories
You can't. An SVG linked to with <img> is effectively loaded and presented on the page as if it was a bitmap (like a PNG etc). It must be inline if you want to manipulate it.
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 🎉
In this project:
https://test.restaurantacasa.cat/
I use vectors as restaurants logos. In some of them, I include (embed in the svg) a bit of bitmap, for an example, here:
https://test.restaurantacasa.cat/#!/restaurant/el-campanar
However, if you open that one in Safari (mobile or desktop), you'll notice that the bitmap section is not rendered.
Can you help me understand why?
I produce the vectors with Adobe Illustrator.
Have you tried using <object> to embed your SVGs, instead of <img>? <object> elements don't have the same restrictions on external references that <img> does.
This is a known bug with Safari.*
When you use SVG as an <img>, external files such as embedded images are not loaded (in any browser). To get around this restriction, Illustrator converts embedded images to data URI values, so that all the data for the embedded image is stored in the SVG file.
For most browsers, this is enough. However, Safari treats the data URI value the same as any other URL referencing an external file, and does not process/load it.
* Scroll down the comments on the linked bug report, it took people a while to figure out what the problem was! The main discussion starts around comment 16.
I also had this issue and found a solution which I thought was worth posting here.
I was embedding the SVG as an object:
<object data="path_to_file.svg" />
and the object was including the image as:
<image href="raster.png" />
This worked everywhere except Safari. I found out that the proper syntax to use is this:
<image xlink:href="raster.png" />
Furthermore, if you are javascripting, it's not sufficient to just setAttribute() you need to setAttributeNS() like so:
el.setAttributeNS("http://www.w3.org/1999/xlink","href","raster.png")
Also, be sure to include the xlink NS at the top of the SVG file in the SVG tag:
<svg ... xmlns:xlink="http://www.w3.org/1999/xlink" ...>
(based on info I found here)
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