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.
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 have a black #000 page background on my web page.
Is there a way that I can change this with SVG to show a random effect of small #111 and #222 colored squares. I was told I could do this with SVG but I don't have any idea where to start. Even a really simple example would be a great help.
I'm looking for a solution for IE9+ browsers.
SVGs can be used as background images they same way that a PNG or JPG can. Create an SVG with any suitable editor - such as Inkscape - and include it the way you normally would.
background-image: url(../images/mybackground.svg);
There is this site http://game-icons.net/ that offers huge number of open source icons. That is 1345 SVG files to this day. I would love to use them with a web project I am working on right now. The logical step is to transform them into an icon font. Normally, I would just upload them to https://icomoon.io/app/#/select/font and voila ... but!
The icons are inverse, white symbols on a black rectangle. I can invert colors in Illustrator, but some of the icons have overlaping shapes and this breaks them when icomoon tries to make them Black-transparent.
Example: http://game-icons.net/lorc/originals/archery-target.html
The circles are white, not transparent.
How to flatten a Black-White SVG file with overlaping shapes into an icomoon friendly Black-transparent SVG?
My wish is to make the font open source as well and send it back to the site admins for everybody to enjoy.
At the moment the icons have layers of black and white paths. You are going to need to use the "merge paths" feature of Illustrator or Inkscape to make the white (or black) paths into holes where appropriate. I think this is pretty much going to be a manual task. You could write a script to help with some of the work, but I suspect you would end up needing to fix a large number of the icons afterward anyway.
World Map Images in Adobe Illustrator CS5
I have an image Map in illustrator CS5 which i want to save in GIF so as to reduce its size for web use. But when i save it, the map boundaries are having some white pixels all along the map boundaries of map.
I really dont know why has happened to it, but cant save it in Png-8, png-24 formate due to size constraint.
Any meaningful answer will be highly appreciate and thanks in advance.
Is your background a non-changable color? Maybe you can save the image with the same color as a background.
The problem is gifs don't support true transparency.
If this doesn't work can you provide the image you are trying to save (gif and png, I don't have AI right now)? Maybe there will be something I can do about the size or clearing the gif's edges.
transparent GIFs don't have an 8-bit alpha channel, like PNG does: a pixel in a GIF is either there, or it's not: if it's there, you can't see through it. This often means that an edge between transparent and non-transparent areas looks blocky.
There are two ways to deal with this... either use a PNG 24 (and the Illustrator Save for Web feature will help you to make it smaller), or in Illustrator create a background color layer behind your image before you export to GIF. If this background color layer is the same as the website you put the image on, the edges will blend nicely.
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.