SVG: What am I doing wrong?
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?
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.
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.
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
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
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?
- Stef.
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?
- Stef.
2019-07-29 10:26:38
Thanx, Stef. Here is link to the image.https://drive.google.com/file/d/1q9S3xV ... sp=sharing
2019-07-31 08:23:28
This is the same as I see, and the reason for me creating the thread.
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:
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.
Have fun and I hope this helps. If not, let me know and I'll dig further.
- Stef.
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:
into 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">
and you get 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">
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.
Have fun and I hope this helps. If not, let me know and I'll dig further.
- Stef.
2019-07-31 14:05:40
Perfect workaround. Thanx!!