SVG: What am I doing wrong?

Talk about Pixelmator Pro, share tips & tricks, tutorials, and other resources.
User avatar

2019-07-26 10:34:56

I have drawn some shapes and made an icon I want to use as SVG. The icon has several layers, all layers contain paths only (strokes and fills). But when trying to export as SVG, the image is not scalable. What am I doing wrong?
User avatar

2019-07-26 12:47:23

(Pixelmator Pro 1.4 on macOS 10.14.5)

Hi Morten.

I'm not sure what you mean by "the image is not scalable". (but I'll have a go anyway)

For example, if I create a small image, say 200x200px and fill the canvas with a circle using the Ellipse tool. The circle looks pixelated but that is because Pixelmator Pro is being true to its roots and showing a raster version of the circle on screen.

If I then export the image as SVG I can look at it in Preview and see that the edges of the circle are smooth. The circle will appear in the corner of a strangely large canvas but that is just Preview being weird.

Let's prove that the image is actually scalable. Return to Pixelmator Pro and create a new image, say 2000x2000px. Import your previously exported SVG and resize it to fill the canvas. The circle will be smoother because it's being rendered with a higher pixel density. It has been scaled.

So... I've two questions...
1. What happens when you try to do the above: do you get the same results?
2. If so, I'm guessing you mean something else by "not scalable". Can you elaborate or give an example of how the image fails to scale?

Hope this helps.

- Stef.
User avatar

2019-07-27 06:34:41

Hi, Stef and thank you for your reply.
With not scalable I mean: I have opened some SVGs that I have not made (they are made by an agency), and these SVGs fill Preview's window and scales up or down when I drag the window side or bottom to make the window smaller or bigger.

I will try your question no1.

Morten
User avatar

2019-07-28 21:12:40

Hi Morten.

Give that a go and if you're happy that everything is working fine, I'm happy to work through what is happening with Preview and why Pixelmator Pro SVG files aren't working the same as those others. If you have a file that we can use as an example, I'm sure we can get to the bottom of it. After all, SVG files are plain text: how hard can it be? :grin:

- Stef.
User avatar

2019-07-29 10:26:38

Thanx, Stef. Here is link to the image.https://drive.google.com/file/d/1q9S3xV ... sp=sharing
User avatar

2019-07-31 07:22:03

This could get more complex.... here's what I see when I quick-look at your SVG from Finder. It's not filling the window. Do you see something different? If so, what?
Image
User avatar

2019-07-31 08:23:28

This is the same as I see, and the reason for me creating the thread.
User avatar

2019-07-31 09:07:37

Can you send me an SVG file that behaves the way you want it to? So that I have something to compare it to?
User avatar

2019-07-31 10:59:57

Never mind. I grabbed the SVG logo from wikipedia and had a play with that. What you're seeing is a result of how macOS displays SVG files that have embedded pixel dimensions. And Pixelmator Pro embeds pixel dimensions into SVG files.
Take the file that you uploaded and edit it with a text editor. For some reason TextEdit won't open .svg files from Finder (or its File > Open dialog box) so open TextEdit then drag the .svg file onto its icon.
Change the second line from this:
<svg width="500px" height="281px" viewBox="0 0 500 281" xmlns="http://www.w3.org/2000/svg" xmlns:xink="http://www.w3.org/1999/xlink" version="1.1">
into this:
<svg width="100%" height="100%" viewBox="0 0 500 281" xmlns="http://www.w3.org/2000/svg" xmlns:xink="http://www.w3.org/1999/xlink" version="1.1">
and you get this:
Image
I can see the reason why Pixelmator Pro embeds pixel dimensions. I can also see the use of having pixel-agnostic SVG files. What you do with this information I'll leave up to you. :grin:
Have fun and I hope this helps. If not, let me know and I'll dig further.
- Stef.
User avatar

2019-07-31 14:05:40

Perfect workaround. Thanx!!