Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: Breaking apart an image for SVG output

  1. #1
    Join Date
    Aug 2009
    Location
    utf-8
    Posts
    205
    Thanks
    4
    Thanked 7 Times in 7 Posts

    Default Breaking apart an image for SVG output

    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.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	vacation_26-512.jpg 
Views:	203 
Size:	14.5 KB 
ID:	5947  
    An inline div is a freak of the web and should be beaten until it becomes a span

  2. #2
    Join Date
    Aug 2009
    Location
    utf-8
    Posts
    205
    Thanks
    4
    Thanked 7 Times in 7 Posts

    Default

    This does not have to do with image sprites, sort of. It is more of adding a class to an SVG image sprite.
    An inline div is a freak of the web and should be beaten until it becomes a span

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 09-17-2016 at 03:48 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Aug 2009
    Location
    utf-8
    Posts
    205
    Thanks
    4
    Thanked 7 Times in 7 Posts

    Default

    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
    An inline div is a freak of the web and should be beaten until it becomes a span

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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
    Last edited by jscheuer1; 09-18-2016 at 02:14 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Aug 2009
    Location
    utf-8
    Posts
    205
    Thanks
    4
    Thanked 7 Times in 7 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    But what you were talking about sounded more like a sprite.
    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.
    An inline div is a freak of the web and should be beaten until it becomes a span

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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/
    Last edited by jscheuer1; 09-18-2016 at 08:09 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Aug 2009
    Location
    utf-8
    Posts
    205
    Thanks
    4
    Thanked 7 Times in 7 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    Did you try my HTML page with its svg section
    Yeah but the image turns out all black. On top of that I cant add any classes to the svg file.
    An inline div is a freak of the web and should be beaten until it becomes a span

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 09-20-2016 at 12:37 AM. Reason: add demo
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Aug 2009
    Location
    utf-8
    Posts
    205
    Thanks
    4
    Thanked 7 Times in 7 Posts

    Default

    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.
    An inline div is a freak of the web and should be beaten until it becomes a span

Similar Threads

  1. Breaking a background image out of its div
    By FrickenTrevor in forum CSS
    Replies: 3
    Last Post: 04-08-2013, 12:50 PM
  2. Replies: 0
    Last Post: 03-13-2010, 01:19 AM
  3. photos breaking up?
    By confused2 in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 02-09-2010, 02:51 AM
  4. breaking news xrumer blast breaking captcha code
    By GefsIllishemi in forum The lounge
    Replies: 0
    Last Post: 01-22-2010, 06:13 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •