Converting Picture To Shape

[Chris M]

I'm hooked on changing the look of an audio player., we all have hobbies, don't judge The code utilises named objects, the two I edit mainly are filename="back" and filename="timeline" (player background and the timeline). Using shapes, lines, transparencies, fills etc work perfectly, and my limited imagination has skipping through ideas like a lamb in springtime. However, if I drop a jpeg, bmp, whatever into the mix, I end up with a blank space.

Picture on it's own - nothing
Picture grouped with shape - nothing
Shape on it's own - fine
Shape grouped with shape - fine

Is there a way to convert a picture to a shape? This may well be my lack of understanding the what constitutes the difference between a graphic, a picture and a shape.

I use XWDP but have easy access to XDP if needs be.

[gwpriester]

A picture, i.e. a bitmap is a fixed resolution image comprised of pixels.

A shape, if it is a vector shape is comprised of vector objects which are defined by their outlines and can be scaled up or down with no loss in sharpness.

See https://vector-conversions.com/vecto...vs_vector.html

[Chris M]

A picture, i.e. a bitmap is a fixed resolution image comprised of pixels.

A shape, if it is a vector shape is comprised of vector objects which are defined by their outlines and can be scaled up or down with no loss in sharpness.

See https://vector-conversions.com/vecto...vs_vector.html

Thank you, I am now a little smarter than I was.

Converted a sample jpeg to svg using Vector Magic, grouped it with a shape and named it. Worked perfectly. I'm now going to spend the rest of my Sunday playing nicely.

[Chris M]

Observations for those who may be interested.
I used Vector Magic because Xara exports to SVG with an Object Name of (Many) that can't be deleted or replaced...or so I thought. The default export is Adobe, but changing this to the Inkscape option exports to SVG without being a Named Object. I have no idea what the difference between these two is. Clip Path (Adobe) and Pattern (Inkscape).

Task achieved without leaving XWDP.

[handrawn]

thats good - the xara trace can sometimes be a bit rough and ready, or excessive in it's shapes, compared to VM or inkscape itself - not something that is an issue unless it becomes noticable...

[Chris M]

thats good - the xara trace can sometimes be a bit rough and ready, or excessive in it's shapes, compared to VM or inkscape itself - not something that is an issue unless it becomes noticable...

For anyone reading this for inspiration, listen to handrawn. The largest size I'm playing with is 60x60px, and I'm shrinking rather than enlarging stuff.

[gwpriester]

Vector Magic is expensive but it is really good. You can trace from a PNG or BMP or JPEG or just about any bitmap file format.

I use the Save as PDF or SVG for the output.

[Acorn]

Is there a way to convert a picture to a shape?

Chris, bear with me on this one.

If you create a Rectangle the same dimensions as you image and then Fill it with the image, you get a Photo.
If you change the Bitmap Fill from single Tile to Repeating tile, you get a Rectangle.

You can SVG this. I chose 300dpi; Clip path (Adobe); selected object.

The resultant code block (less the bitmap) is:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!--Generator: Xara Designer (www.xara.com), SVG filter version: 6.3.0.31-->
<svg fill="none" fill-rule="evenodd" stroke="black" stroke-width="0.501" stroke-linejoin="bevel" stroke-miterlimit="10" font-family="Times New Roman" font-size="16" style="font-variant-ligatures:none" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" overflow="visible" width="191.999pt" height="191.999pt" viewBox="139.697 -585.552 191.999 191.999">
 <defs>
  <image id="Bitmap" preserveAspectRatio="none" width="1" height="1" xlink:href="data:image/png;base64, ...=">
   <title>1</title>
  </image>
 </defs>
 <g id="Page background" transform="scale(1 -1)"/>
 <g id="MouseOff" transform="scale(1 -1)">
  <clipPath id="clip-path">
   <use xlink:href="#Shape"/>
  </clipPath>
  <g clip-path="url(#clip-path)">
   <use xlink:href="#Bitmap" transform="translate(139.697 585.552) scale(191.999 -191.999)"/>
  </g>
  <rect x="-96" y="-96" width="192" height="192" transform="translate(235.697 489.553) rotate(90)" stroke-linecap="round" stroke="none" stroke-width="0.75" stroke-linejoin="miter" fill="none" id="Shape"/>
 </g>
</svg>

An Inkscape Pattern is more flexible if you are going to include more shapes and gradients.

Either one, necessarily uses, IDs. Again, useful for CSS and other manipulations, especially animations.

The power of either will come when Xara natively handles SVG Imports as SVGs.
When I Import either back in, I get:

• Adobe:
  
  • Rectangle, Named Shape
  • Clipped Shape:
    
    • Photo "Bitmap" (782 dpi), Named Bitmap, 98.2px²
    • Unnamed Rectangle
  
  
• Inkscape:
  
  • Clipped group:
    
    • 4 copies of:
      
      • Photo "Bitmap" (782 dpi), Named Bitmap, 98.2px²
      • Three "copies" are empty
      • Area of all four occupies 609.7px²
      
      
    • Unnamed Rectangle

The <Many> you were getting was the combined selection of the two Shapes within the (Adobe) Clipped shape.

Sadly, Xara, again, fails to validate its SVG Impex.

Acorn

[Chris M]

Long, boring and full of uncertainty:

Acorn, I actually understood most of your explanation rather than just following A to B to C which I normally do when you go all technical;I'm quite proud of myself. However, in this particular case it made no difference, the result was nothing showing with either Single Fill or Repeating Fill. Likewise, exporting both Single and Repeating to SVG through Xara, and then importing back, failed to show.

Previously I stated using the Inkscape option allowed the Xara exported SVG to work...I am now retracting that statement. I overwrote the VM SVG with the Xara SVG, but Xara doesn't let go of the first one by just deleting it from the page, you have to delete it from the bitmap gallery. Then the Xara SVG failed to show again. For clarity - import image.svg - delete it from the page - import an overwritten image.svg - Xara ignores the new one and uses the stored original...I think.

TL;DR
I cannot make Xara's SVG export/import to show in the player at all
Once imported, Xara appears to keep hold of SVGs unless deleted from the Bitmap Gallery (vague on this bit)

This is a one off exercise, and I, luckily, have access to a pro design/print business with an impressive array of software so not a big deal. I've added the player in case anyone wants to play around, but I now know how to do what I want to do. Move along, nothing to see here.

Audio-Player-Desktop.web

[handrawn]

if your svg is in the bitmap gallery it's a bitmap, not a vector [svg container can include both], i am now confused...