I have an SVG file that was generated by Illustrator that I have modified slightly, so that I can use it as a mask on both Webkit and Gecko.
The file has the glyphs I need stored in <font> with a defined font-family. Right after there is a <text> element. This is what Webkit uses directly to create the mask. The font-family value correlates to the defined font and it renders correctly.
Then I have a <mask> element (because Firefox can only use that) with the same <text> element inside of it. It renders, but for some reason the font-family that is being declared won't work. I feel like this is something simple but I have very little experience with SVG (though now I know a hell of a lot more than I did!)
Basically how do I get the element inside mask to be able to reach the <font> element?
Firefox does not support SVG fonts. Convert the SVG font to a woff font by using something like this.
Related
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!)
I'm generating an SVG in a web app and allowing users to save it; the SVG embeds the styles in the header of the image.
When a user opens it in their browser (testing in Chrome) it style properly:
However in Illustrator it seems the styles aren't being applied:
What am I missing? Download the actual SVG here.
The problem is really with Illustrator's SVG importer.
You probably have to choose between two solutions:
Tell your users that saved SVGs won't work with some programs (like Illustrator)
Modify your graph generating code so that it doesn't rely on CSS classes.
For example: change the elements that use
class="link"
To instead set the style properties explicitly:
fill="none" stroke="#aaa" stroke-width="2px"
Or maybe you can find a script on the net somewhere that does that for you.
i want to acheive the effect on this page using SVG. As you can see it uses a series of PNG transparent overlays when the user mouses over a polygonal hotspot drawn on a product.
What i want to achieve is the same thing with SVG, but without messing about with creating a load of PNGs, so that when the user mouses over an area the transparent shape (with link on it) appears over the top. The SVG shape would be built from a set of coordinates exactly as a polygonal hotspot would on an image map.
So i guess my first question is, can this be done with plain old SVG or do i need to use something like Raphael to achieve this? Never seen this effect before with SVG so if anyone has an example like that would be very useful.
Thanks in advance.
There are several ways to get this effect with plain old SVG. Probably the simplest is to use CSS within the SVG. For example:
<style>
.overlay:hover
{
opacity: 0.5;
}
</style>
<svg>
<a xlink:href="http://www.wherever/you/want/to/link/to.com">
<path class="overlay" d="Coordinates of your shape..." />
</a>
</svg>
I've written about various other methods at:
http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs
Yes it can be done with SVG only, with or without javascript.
One way to get the effect would be to overlay a white semi-transparent path on top of the image that you want to whiten. Another way would be to use an SVG filter to process the image directly, similar to what I've done here or here to recolor a PNG (view page source and feel free to reuse that in any way you like).
You'll want to make use of the 'pointer-events' property most likely. Here's an example showing how to detect mouse-events on the fill and/or stroke of an svg shape, even if the shape is invisible.
I would like to take a multiline block of text and display it in SVG. I would like to keep the lines as lines. Is there a proper way to do this?
I am using Inkscape for my base drawing and Batik for my rendering. It seems the two do not agree on how to do this.
Inkscape is creating a structure like this:
<flowRoot
xml:space="preserve"
id="flowRoot3089"
style="font-size:16px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
transform="translate(19.71875,334.88681)">
<flowRegion id="flowRegion3091">
<rect id="rect3093" width="50.78125" height="75" x="34.765625" y="155.89932"/>
</flowRegion>
<flowPara id="flowPara3123">Item 1</flowPara>
<flowPara id="flowPara3137">Item 2</flowPara>
<flowPara id="flowPara3139">Item 3</flowPara>
</flowRoot>
However, this is not acceptable to Batik for some reason.
Inkscape sets the SVG version of the document to 1.1 instead of 1.2, but still uses flowing text.
The simple solution for you is to edit your svg document and change the SVG version attribute to 1.2. Inkscape will not change it back to 1.1 and it handles the 1.2 version specifier fine.
Batik will then be happy to provide most functionality, however you'll also run into another Inkscape bug if you mess with pretty much any of the text attributes within the flow root that Inkscape creates. It sets the background color to the selected foreground color for the text, which means if you set the text color to red in Inkscape, when batik renders it, you'll see a red square ... the text is there, but its red too, so not really visible. This an Inkscape bug and is clearly visible in the code for the flowRegion -> rect element.
The solution is to manually edit your flowRect attributes after tweaking them with inkscape.
Batik also seems to do better if you use the standard svg output rather than inkscape svg output.
This is not acceptable since flow* elements are non-standard elements. It comes from an SVG1.2 draft that has never been accepted and it is designed to wrap text in custom shapes. Only Inkscape and some builds of Opera support it. So, don't use it, at least for the moment.
If you don't need text wrapping (and you don't seem to, but I don't understand what you mean by "I would like to keep the lines as lines"), I suggest you use the basic <text/> element.
I'd suggest <text> with <tspan> children. Inkscape can generate that for you quite easily, just don't click and drag an area but instead just click where you want the text and start writing, press return where you want a new line.
Alternatively, foreignObject will allow you to include html:
<svg:foreignObject><html:body><div>text here</html:div></html:body></svg:foreignObject>
Doesn't seem to work in Opera or IE, though.
I tried to resize svg file to be opened in illustrator with smaller width and height(pixels or cm), I did this by changing width, height and viewBox attributes in <svg> tag, but it doesn't work at all. By search I have found that transform attribute via matrix value affects the real resizing of the figure, any ideas about ready made functions or scripts using python or librsvg to successfully scaling the svg figure, by the way I'm using inkscape to produce svg files. THANKS
You could try svg scour, that should be able to find a good viewBox to use (note spellning and uppercase 'B'). Then change only the width and height attributes to be whatever you want, and hopefully that should work.