Download an svg with fontawesome icons
Hi everybody,
from a couple of days I've tried to implement the download of an svg, generated with d3 version 3.5.5, inside which there are fontawesome icons.
Those icons have to be filled with a custom color, specified in an ajax service from server.
The "download" action itself it's simple and works but the generated svg doesn't render the icons: it shows empty and bordered squares, as it doesn't recognize the font.
Now in the svg, as you can see in the jsfiddle, icons are inside a tspan inside the ".legend-container".
I've tried these these solutions:
link fontawesome inside svg
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.5.0/css/all.min.css" type="text/css"/>
nope (but I may have done something wrong)
svg local css: nope
tspan replaced with an image that's linked to an external icon svg linked. I changed the icon color with a stunning function that calculates the filter property starting from an hex.
This last solution works but I have to replace that elements (text and tspan) with "g" tags, and this break the legend layout, making very difficoult to put every element (has to be responsive, as possible) in the structure.
Does anybody have any idea?
I'm opened to every other solutions.
Sorry for my english, I hope I'm making myself clear.
Thank you for reading!
Related
I am importing tabler icons in a cdn in my public html folder:
<link rel="stylesheet" href="https://unpkg.com/#tabler/icons#latest/iconfont/tabler-icons.min.css">
and per the Vuetify docs bringing in the icon library (in plugins/vuetify.js):
export default new Vuetify({
icons: {
iconfont: "ti",
}
This allows me to use <v-icon>ti-pencil<v-icon> (as example) in Vue2 components. All of this works just fine. However, when the icons are inside of the <v-navigation-drawer> they are larger and the lines are little too thick. I have only seen the size property that works, but it also shrinks the icon, which is not what I want.
Is there a way to change the stroke width on the svgs with css? Or is there another way to affect the thickness of these paths after being imported? Also adjustments to font-weight are possible but sadly have no effect on the element.
Thanks in advance for any help.
You need to target the icon with Css selectors and adjust the font-weight
Take a look at this codepen.
If you are dealing with Svgs, you can play with viewBox="0 0 24 24" values and change their value!(Which is not recommended)
I made a logo from SVG, and it looks and works fine. The only problem is that when I go into dev tools and then use the select an element tool, it also shows the elements inside of the SVG image as separate elements, rather than the SVG being A single element. I am using an embed tag so the custom font loads. Is there a way to make the SVG show as one image rather than many elements? Thank you!
I'm using a set of svg icons in my applications, and I'm painting them using librsvg. These icons are all single-colour black drawings, and I can only draw them black because that is the colour written in the svg file.
There is a way I can to choose, at runtime, the colour (and possibily the alpha channel) of the icon just before painting them, without making a dedicated svg file for any colour I need? Can I make librsvg to ignore the colours written in the svg file and use only the one of my choice? Or any other workaround to have the same effect?
I'm thinking about loading the svg file content and modify in-memory the colour declarations, it should work, but I'm looking for a cleaner way.
Thanks.
You may want to monitor https://gitlab.gnome.org/GNOME/librsvg/issues/379 for a clean way to do this. In summary, librsvg needs an API to let you pass in an extra CSS stylesheet; this way your shapes can obtain their colors from that CSS.
https://gitlab.gnome.org/GNOME/gtk/issues/1471 mentions the way in which GTK hacks around this, and you may be able to use something similar. In short, it creates a wrapper SVG like this:
<svg ...>
<style type="text/css">
... extra styling here ...
</style>
<xi:include href="... original SVG encoded as a data:URL ..."/>
</svg>
(but check the actual source code in the comments there for the correct syntax!)
Would like to take my logo made in illustrator then turn it into a svg so that i can then use Raphael to animate it. I know how to make a simple image by creating my own path using lineTo.
Didn't know if this is possible or not.
Thank you
Once you save your logo created with Illustrator as svg file, there is a way to convert the SVG into a Raphael object and then you can use it with Raphael library.
Chack out this website: http://irunmywebsite.com/raphael/SVGTOHTML_LIVE.php
If you can, open the page with Firefox. Chrome messes up the page. Good Luck.
Well, if its just the path you need without the colors, stroke widths etc, i would save the illustrator logo as an SVG and then open it with a text editor(say Notepad).
From there i would extract the d attribute as a path and manually add the rest of its ''features'' like colors,stroke widths etc.
So here is the problem:
I am trying to create dynamic buttons that have text. The text will be generated dynamically so the svg object doesn't know the size of the text. There are two things that I am looking to do and I hope that SVG will do this
First I want the left and right edge of the svg element to stay the same even if I scale the element horizontally
The problem is that I have to set a width on the svg otherwise it doesn't show up when I display the page. Also on the Home and blog buttons you can see that the edge is compressed. I want the edge to stay the same no matter how much text is in the element.
Also I can't seem to set the scale or width properly even with a javascript .getComputedTextLength()
Any help or a point in the right direction would be very helpful
Buttons that are sized to their text content is functionality that can be adressed with Raphael's getBBox()
The use of this js library means that you are implicitly using SVG or VML and this functionality is more easily addressed by referencing this JavaScript library
To see the getBBox() function in action you could visit the Autobox example here:
http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2