Printable View
I have a single PNG file that has six drawings in it. Whenever I use Illustrator CC or Inkscape it always outputs it as a Base64 encoded SVG, which is not what I am trying to do. I want to have the output where each drawing is a separate id so I can change the color to anything via css, check this out for an example of what I mean. The original image that I am working with has been attached.
This does not have to do with image sprites, sort of. It is more of adding a class to an SVG image sprite.
Can you edit the source code in a text editor? Can you put up a demo of your image as a base 64 svg as produced from one of those programs?
Also, from playing around with this, it appears even if an image has a transparent background, you cannot give it a hover fill. You can however put it on top of a shape of the same size and give that a hover fill color. I don't think it matters how the image is generated (base 64 text or as a url), that is assuming it is signified by an image tag. If it's a background, then the element it's background for would have to accept the fill color and then that might work. If not (if the element the image is background for doesn't accept fill), you could always use the css 3 multiple backgrounds feature to achieve the effect I think you are after.
I̶ ̶h̶a̶v̶e̶ ̶a̶t̶t̶a̶c̶h̶e̶d̶ Here is a link to the output of exporting the png as an svg in illustrator. I had no idea SVGs are not an acceptable upload type. Also I am not looking for css 3 multiple backgrounds. Here is something a little closer to what I am looking for, to be able to control each drawing in the image with css via id's/classes
http://codepen.io/chriscoyier/pen/evcBu
Your second example fiddle (kiwi) is very much like the first. It's svg shapes that when hovered change their characteristics. There are technically no images involved, those are drawings - shapes. The 'svg' image you linked to is still a png image. It is simply a base 64 encoded png image:
Now, you could (assuming the actual image were in the same folder as the svg page) get the same thing using the image url. Svg is just text, like HTML, it just has a different syntax and different capabilities (in supporting browsers, svg can be part of an HTML page in fact):Code:<image width="985" height="703" xlink:href="data:image/png;base64,iVBORw0KGgoAAA . . .
I've added x and y positioning coordinates (svg image tags support them, and possibly other stuff). Now here's an example of HTML and svg combined, run it (make sure the image is available in the same folder):Code:<image width="985" height="703" xlink:href="vacation_26-512.png" x="50" y="50" />
It acts just like HTML until the svg tag, then it acts like svg. In fact, you can put HTML tags inside the svg tags and they will act like HTML tags, but they will also force the end of the svg tag. That's sort of like what happens if you put a block level element inside a <p> tag (in case you didn't know, that forces the closure of the <p> tag).HTML Code:<!DOCTYPE html>
<html>
<head>
<title>Bob</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {stroke: black; fill: white}
.A:hover * {fill: orange}
.B:hover {fill: blue}
</style>
</head>
<body>
<p>Hello world</p>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="200" width="100%">
<g class="A">
<circle cx="100" cy="100" r="50" />
<circle cx="250" cy="100" r="50" />
<image xlink:href="vacation_26-512.png" x="50" y="50" height="100" width="100" />
</g>
<circle class="B" cx="400" cy="100" r="50" />
</svg>
</body>
</html>
OK, so in any case, regardless of whether it's base 64 encoded or represented by its url in the folder, we have an 'ordinary' png image in an svg image tag. You could change its x and/or y in css or javascript. But what you were talking about sounded more like a sprite. You can use a base 64 encoded image as background, then you could use it just like a sprite:
Here it's important to encode it at the size that you want or to control its size as background using other css properties. But it can only be used this way on an HTML element. Svg shapes do not accept background in css, at least not when I tried it.Code:background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUh . . .");
There are however a plethora of svg tags, so some might accept background, or there might be a way to assign an image to them in other ways.
There's also a stacking effect in svg. Things that come later cover things that come earlier, so you could possibly use that to crop the image and use movement of the image to get a sprite like effect. In my HTML/svg example, try moving the image tag before the two shapes, it gets covered.
One other thing I discovered is that one can convert an image to an svg drawing. But when I did this using a free online tool* it came out as black and white only, the first part (the rose with a fox tail I think it was) became a solid black silhouette. Perhaps a better conversion tool could render it more exactly. Once rendered like that (as svg shapes), it could be filled though and have other svg things done with it, but it was a series of svg element shapes at that point, so that would be tricky, though I'm sure possible to work out.
I'll look into this further. Hopefully this is giving you some ideas.
* http://image.online-convert.com/convert-to-svg
Actually yeah that is pretty much what I am trying to make. An SVG sprite, but be able to change the sprites colors if needed via CSS instead of having to edit the actual image.Quote:
Originally Posted by jscheuer1
Did you try my HTML page with its svg section (you can use just the css and the svg part, it works on its own)? It changes the background color of the image (if you used a square instead of a circle behind it and only one, instead of the two shapes), the effect would be more complete/precise). And, as I explained, if needed one could mask the image and move it and/or the masks around to get a sprite like effect.
There may be simpler ways.
See also:
https://developer.mozilla.org/en-US/...eb/SVG/Element
This looks interesting too:
https://24ways.org/2014/an-overview-...on-techniques/
Yeah but the image turns out all black. On top of that I cant add any classes to the svg file.Quote:
Originally Posted by jscheuer1
I don't think that's what happened here. Oh well, this is still a new thing. What browser? I'll put up a demo soon. But I'm not likely to do this all for you, just point you in some hopefully good directions.
OK, here's a demo:
http://john.dynamicdrive.com/demos/t.../svg/demo3.htm
If the circle were a square, the effect could be more like a usual rollover highlight. Other things are possible.
Is the image all black? The one you uploaded was (once I saw it in your post) mostly, only the first part (rose/fox) had color. In Opera, Chrome, IE 11, Firefox, it still does have color there.
Actually I think you have me all wrong, and I am glad you made a demo to explain what you were talking about. The demo made more sense for me. However like I said I am not trying to achieve the first link I posted (this one), but create a sprite sheet and then change individual shapes colors via css. Also not having to rely on a separate PNG file.