copy/pasting <svg> content

[prof_b]

I was watching a video by a css developer - he was using illustrator and simply copied an object to clipboard and then pasted into his text editor as an sag tag.

I often want the svg content like this and have to export as svg, load in the file, then copy/paste the content.

This feature would be fabulous!

Here is the video (time index 3:30) - 

 

[Mark Ingram]

@prof_b, interesting suggestion - we have the reverse available, copying SVG text and pasting into the application pastes an image. 

[Peter Flint]

On 9/16/2020 at 12:40 PM, Mark Ingram said:

@prof_b, interesting suggestion - we have the reverse available, copying SVG text and pasting into the application pastes an image. 

Do y'all have a resource that can walk me through this feature? Designer keeps hanging on all of my experiments with it. I'm not far enough along to report as a bug.

Thanks,

Peter

[Old Bruce]

12 minutes ago, PWF said:

Do y'all have a resource that can walk me through this feature? Designer keeps hanging on all of my experiments with it. I'm not far enough along to report as a bug.

You will need a text editor that can open an SVG file as text. Then just select all the text in that Text Editor and copy it. Open up a FILE/Make a new file in Designer and paste.

Check your preferences for Designer, in the General section is a checkbox for Copy as SVG.

[walt.farrell]

On 9/16/2020 at 11:36 AM, prof_b said:

I was watching a video by a css developer - he was using illustrator and simply copied an object to clipboard and then pasted into his text editor as an sag tag.

I often want the svg content like this and have to export as svg, load in the file, then copy/paste the content.

 

On 9/16/2020 at 12:40 PM, Mark Ingram said:

@prof_b, interesting suggestion - we have the reverse available, copying SVG text and pasting into the application pastes an image. 

I don't know if something has changed since you wrote that, @Mark Ingram, but I can enable "Copy as SVG" in my Designer Preferences, copy some curves to the Clipboard, and paste into a normal text editor, and I get the text version of the SVG in my text editor.

So it seems to me that the feature @prof_b asked for is available.

[Peter Flint]

38 minutes ago, Old Bruce said:

You will need a text editor that can open an SVG file as text. Then just select all the text in that Text Editor and copy it. Open up a FILE/Make a new file in Designer and paste.

Check your preferences for Designer, in the General section is a checkbox for Copy as SVG.

I am copying code generated from a web page. I have everything set up as described and the image appears on-screen when pasted, along with curves imported into the Layers panel, but ultimately if I try to manipulate it I get a pinwheel and Designer goes into a hang. 

This is mostly a "fun today, work in a month" experiment for a friend developing web-based generative design tools. We're curious about its application to other graphic software. I'm not the savviest with code so I'm not sure whether its the code itself, something happening in the transfer from browser to app, or Designer. Some screenshots below if anyone is curious, but as I said, this isn't professionally imperative.

Thanks

[MmmMaarten]

@prof_b As @walt.farrell said it's working more or less the same in Affinity Designer as in Adobe Illustrator: you select an object in Designer, you copy it (ctrl-c on Windows) and can directly paste it in any text editor with ctrl-v or 'paste' (if you have 'copy as svg' checked in the settings that is)

The 'copy as svg' option is available in the settings for a long time, but didn't work for most of the time as there previously was an issue with it for years. But months ago Serif fixed this. So if you're using the latest version you should be fine. Just tested it here and it works as expected in 1.9.2

@Peter Flint Not sure how you 'paste svg' by text into Designer, but assume you're using just ctr-v/paste which should work (and I see it working as expected in 1.9.2). Also, if I copy a path in Designer, paste it in a text file, edit the color by editing that text file, copy the changed contents of the text file and paste that changed svg text into designer by using 'paste'/ctrl-v it just works. It's a simple test case as it's a simple shape, but I would be surprised if the importer used to paste svg text would be much different than importing an svg file in Designer.

If pasting doesn't work as expected I'd say it could be one of these:
- You didn't copy the full svg content, making it somehow invalid
- The svg content isn't compatible with the svg standard or is missing things (like missing closing tags), which some browsers are forgiving in, but Designer might not
- There is something Designer has an issue with in svg compatibility or unsupported features -> in that case you could file an issue on the forum to make Serif aware about it

First thing I would do in your case is verify and be absolutely sure that the svg text you're pasting is absolutely valid to the svg standard.

[Edit] I think I see at least one issue in the svg you try to paste: You're not using absolute color values in your svg, but things like 'currentColor' instead. That doesn't work in any svg editor AFAIK, at least not in Designer. When I try using currentColor here I don't get Designer to hang like you write so there are probably more issues in the svg, but currentColor doesn't work purely in svg AFAIK. At least it should know what 'currentColor' is, and it doesn't in your svg without the html that it's wrapped in. So that should be changed to a real color value, like #FF0000.

[Peter Flint]

@wigglepixel Thanks. Will give those suggestions a try and follow up as necessary.

PWF