Page 2 of 2 FirstFirst 12
Results 11 to 15 of 15

Thread: Breaking apart an image for SVG output

  1. #11
    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

    Well the external png file xlink:href and a datang 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.


    *With svg, you can use shapes and their attributes to actually render an icon. Or an image may be base 64 encoded as type svg and used for the xlink:href attribute of an svg image tag. With png it has to be either base 64 encoded or external, either way it can only be used in svg as an xlink:href of an svg image tag. Either svg or png encoded can be used as background, but perhaps only in HTML - I've yet to see svg shapes that can accept background images, though one would think it should be possible.
    - John
    ________________________

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

  2. #12
    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
    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 editore.
    Trying to figure out how to do that, I have Illustrator CC but I cant find any tutorials/dont know how to do it.

    Also I created a different SVG. Here is the link:
    https://mega.nz/#!P0oERL4B!Jy2CEm_d4...lsaaY7v86z8z1w

    If you look at the code this one has a different structure and is not base64 encoded. Still though I dont know how to add a class. Would it be ok do do path="id" or g="id"? Also with that,
    there is already an id associated with the g tag which I dont know what it goes too.

    Code:
    <g id="#000000ff">
    <path fill="#000000" opacity="1.00" d=" M 22.89 15.46 C .....
    Last edited by FrickenTrevor; 09-21-2016 at 05:03 AM.
    An inline div is a freak of the web and should be beaten until it becomes a span

  3. #13
    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

    OK, there are quite a few g tags. Each contains a portion of the information used to render the entire image (a collection of shapes actually). And each can be referenced by its id if you want it to appear elsewhere within an svg or HTML document. Though the way this particular one is put together, that might not be all that useful. Most of it is in the first g tag, the other ones are the fill colors for the fox/rose part. You might be able to have another tag around it, and use its id to represent the entire thing. Not sure which tag should be used for that or if it can be done, but I think that's what I've been reading.

    What I was suggesting as regards splitting it up was to work from the png image in an ordinary image editor like The Gimp, or PSP. Make six separate png images. Then convert each one to an svg icon similar to the one you have just created, only just of each individual part.

    But you might not have to do that. Through masks, positioning and/or other techniques you may be able to use it in a manner somewhat akin to an HTML sprite.

    I think I've seen in one of the tutorials how you can use the document you have created as an external file for other svg or HTML files.

    Just as an example of some of what can be done with what you have (I probably am not doing this quite right, but it's a start), make a copy of what you have. Only this time make it start out like so (added and changed tags highlighted):

    Code:
    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg id="#myicon" width="443" height="209" viewBox="0 0 985 703" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <svg width="320" height="340" viewBox="320 340 620 680">
    <g id="#000000ff">
    <path fill="#000000" opacity="1.0 . . .
    And, of course at the end you have to add a closing </svg> tag (also highlighted):

    Code:
     . . . 202" opacity="1.00" d=" M 131.39 307.56 C 132.32 307.75 133.19 308.10 133.99 308.62 C 133.80 310.75 129.98 309.23 131.39 307.56 Z" />
    <path fill="#850202" opacity="1.00" d=" M 224.89 318.51 C 225.92 318.06 227.00 317.86 228.12 317.93 C 229.34 319.97 224.82 320.72 224.89 318.51 Z" />
    </g>
    </svg>
    </svg>
    Save that and view in the browser. You should see something like so:

    Click image for larger version. 

Name:	vac-m1.jpg 
Views:	156 
Size:	37.5 KB 
ID:	5953

    It's been cropped and resized without changing anything other than the surrounding code. The contained g tags are identical to those in the file you made.
    Last edited by jscheuer1; 09-21-2016 at 11:50 AM.
    - John
    ________________________

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

  4. #14
    Join Date
    Apr 2019
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Nice

    Quote Originally Posted by jscheuer1 View Post
    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
    Oh nice. Thanks for your sharing. Anyway, I have one more tips for that https://www.manticonvert.com/webp-to-png.html

  5. #15
    Join Date
    Jan 2019
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    1-Select the image.
    2-In the format toolbar (or via right-click) select Convert to Shape. It will ask if you want to convert it.
    3-Once it's converted, you need to ungroup the image. ...
    4-Now the image is broken into multiple shapes where you can edit them as you wish.

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
  •