I use jvectormap. I create map. I need to save this svg map as image. I use a plugin named saveSvgAsPng.js. It works ok. My problem is that ,png image makes transparent. Is there a method that I remove svg background transparency?
Thanks in advance.
Have you tried looking at the usage Docs for saveSvgAsPng ?
https://github.com/exupero/saveSvgAsPng
saveSvgAsPng(document.getElementById("diagram"), "diagram.png", {backgroundColor: "white"});
Try and pass "white" or the HEX color value "#FFFFFF"
Pass backgroundColor in the options object:
Available Options:
backgroundColor — Creates a PNG with the given background color. Defaults to transparent.
scale — Changes the resolution of the output PNG. Defaults to 1, the same dimensions as the source SVG.
selectorRemap — A function that takes a CSS selector and produces its replacement in the CSS that's inlined into the SVG. Useful if your SVG style selectors are scoped by ancestor elements in your HTML document.
Related
How can I place a complex SVG image (with css-styles!) geo-referenced over an openlayers map so that the document's CSS styles are used with rendering the SVG.
A regular ImageLayer does a fine job of showing the georeferenced svg on the map as an image. But because it is an image, the CSS of the document has no effect on the rendered SVG
The SVG Layer example on the other hand places the SVG into the DOM and makes it react to the document's CSS and reacts when you change the CSS. But it always maps the SVG over the whole planet and seems to hide any layer I place under it.
To give you an idea of the use case: we have an externally generated SVG with several 'groups or layers' in it representing different aspects of infrastructure. This svg has to be put correctly over a map (like we can do with the imagelayer), but we want to be able to selectively show/hide the different 'groups or layers' that are within the SVG.
I guess in the end we would be needing something similar to ol/layer/Image/ImageLayer to happen in the SVG-layer example.
Any suggestions about how to approach this would be very welcome, but working code is also OK ;-)
In the example the image width is 360 degrees and the center is at [0, 0]. For a smaller extent you would need to use the appropriate width and adjust the center used in the transform https://codesandbox.io/s/lucid-poitras-i1qyb?file=/main.js Use an opacity setting to avoid completely hiding the base layer.
How can I set the foreground color of an SVG element used as a node in cytoscape.js?
I'm familiar with setting id's for SVG path elements in the DOM and then using CSS to style them. Is something similar possible?
What I was really looking for is a way to have scalable SVG node icons that can be colored dynamically to indicate app-defined status of the node. I didn't want to statically create all the possible colored variants ahead of time. In the end, I used svg.js to dynamically apply styles to SVG icons that are used for nodes (actually for node backgrounds), then convert it to base64 for the data url to pass to cytoscape.js as the background svg.
Cytoscape JS uses <canvas> tags to render the nodes and edges rather than SVG. It's not terribly obvious in their documentation, but there is a passing reference.
To style the nodes and edges, you use their own styling system. It is inspired by CSS, but is not actual CSS.
In my .ai (illustrator) file you can see the right color:
But when I save to web SVG the colors change to more lighter colors:
What is happening?
I don't think illustrators svg export functionality includes blend mode filtering. So all of your blends are not being rendered, just the basic shape fill colors. I believe you could achieve your blend effects with filters or css, but it would likely have to be done outside of illustrator in the svg or web code.
I'm working with SVG using the Raphael library. I can apply a fill colour to an object like so:
circle.attr({fill: "#ff0000"});
And this also works (though the Raphael documentation doesn't mention it):
circle.attr({fill: "url(pattern.png)"});
I am able to use transparent PNGs as fill patterns, and transparency works as expected. The svg object is completely transparent where the fill pattern image is transparent. But what I would like to do is specify both a fill pattern image and a fill colour, so that the colour would show through where the pattern image is transparent - similar to the 'background' property using CSS, for example. Is this possible with SVG?
You can define a pattern that has a rect with a fill, and an image that is your png on top of that rect. Then use the pattern as fill for the circle (or whatever element you want).
This means stepping outside of Raphaël, or extending it to do what you want. Note that what ({fill: "url(pattern.png)"}) does is to create a pattern element and and append an image element pointing to the given url. It's quite possible to hack Raphaël to allow you to pass a color too, and then you deal with that in the code that creates the pattern by creating a rect of the same dimensions as the image with the given fill color.
I should say that if you want it to work with IE<9 then you probably need to implement it in VML too.
Other options include drawing two shapes, one with color fill and the other with the raster image fill. Yet another is to make the png include the background color so that it's not transparent.
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.