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:
Code:
<image width="985" height="703" xlink:href="data:image/png;base64,iVBORw0KGgoAAA . . .
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="vacation_26-512.png" x="50" y="50" />
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):
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>
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).
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:
Code:
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUh . . .");
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.
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
ng base 64 xlink:href are the same basic thing, produce the same result on the page - a png image. One's external and one's on the page. If you want to, as the title of this thread suggests, break apart the image, the easiest and perhaps best way to do so would be to just cut it up in an image editor. Then each icon could be encoded or rendered (two different things*) as svg or encoded as png (though this last sort of defeats the purpose, rendering as svg is I would think the way to go if you really want all svg). Anyways, folks have worked this sort of thing out - sprites for svg, have you read any tutorials on the subject? I linked to one at the end of post #7 in this thread.
Reply With Quote
Originally Posted by jscheuer1
Bookmarks