Designer Export SVG

[Stephen Hart]

I have created several labelled thumbnail with readable text in Photoshop and Illustrator.

Here's an example in the last thumbnail: https://onh.eugraph.com/mammals/marmot/index.html

In Photoshop and Illustrator, I used the following workflow to create svg thumbnails.

1. Save cropped image at thumb size from Photoshop in jpg high.

2. In Illustrator, layer the jpg behind a text label. Align the two elements center and bottom

3. Select both layers and export as svg.

I can do  the same steps in Affinity Photo and Affinity Designer, but the svg does not show up in Live view in Dreamweaver or on the web. I've tried all the svg export options in Designer with no luck.

Thanks for any tips.

 

Update:

I forgot one step, after 2. above, aligning, I grouped the two layers.

That improves the situation a bit as I now see a ? where the image should be instead of nothing. Clicking the ? opens the video.

[v_kyr]

So when you open (the by Affinity generated SVG) inside a webbrowser it doesn't show up?

When I use your website SVG thumb sample and import it into Affinity Designer it's layer structure looks like shown on the layers panel ...

... when I export that as SVG from Affinity Designer, pretty much the same layers structure is generated! The Affinity Designer export here also shows up in webbrowsers ...

 

• Affinity Designer generated SVG:    test_de.svg

 

[Stephen Hart]

Thanks for looking into this.

The svg you experimented with was originally exported from Adobe Illustrator.

 

"So when you open (the by Affinity generated SVG) inside a webbrowser it doesn't show up?"

Right. Instead of the thumbnail I see nothing but a ? in a box, the usual missing image icon.

"When I use your website SVG thumb sample and import it into Affinity Designer it's layer structure looks like shown on the layers panel ..."

I"ll look at the svgs I generated from Affinity Designer and see what they show as layers.

Here are two of the new svg files I created in Affinity Designer. One is with the two layers grouped, then exported as "for export." The other is with the two layers grouped, then exported as "digital high." I may well not understand the workflow I should be using in Affinity Designer.

chipmunkshortgroupexp.svg

chipmunkshortgroupdighi.svg

[Stephen Hart]

Oh, I think I see what happened. Affinity Designer took the whole AI document, a working document with several thumbnails and instructions as text and exported it as svg.

In Illustrator, when I selected the flattened image and text box, and exported, only those two elements got exported.

Clearly I'm missing something in how to just export the selected items from Affinity Designer. 

[v_kyr]

Yes, both files "chipmunkshortgroupexp.svg" and "chipmunkshortgroupdighi.svg" do contain four images ...

• <image id="_Image1" ... <image id="_Image2" ... <image id="_Image3" ... <image id="_Image4"

... which you can also see when you open that SVG file in a plain text editor for inspecting the generated SVG code inside!

When exporting from Affinity you should hide (or remove) the other image layers or their groups first, so you export just one of them at time! - Or try the export persona by making slice selections or layer selections for exporting all as seperated SVG files then. - See also in the Affinity Designer online help:

• Exporting
  • Exporting using Export Persona
  • Export Options panel
  • Slices panel
  • Layers panel (Export Persona)

 

 

[Stephen Hart]

Thank you.

Before I saw your last post, I had figured out the problem, partly using the Exporting Help pages.

What I was missing is the panel in the Export Dialog called Area, by default Whole Document.

(Amazing what one can miss just because a dialog box looks different from what one was used to. It's also been quite some months since I did this procedure.)

Then I just needed to choose svg for export.

[Stephen Hart]

In case it might be useful for other users, here are the step-by-step instructions I keep to remind myself:

 

Thumbnails with text labels for websites

 

Open original image in Affinity Photo

Crop to desired ratio (I use 4:3)

Export as jpg max at desired pixel size (I use  128x96) (I retain the intermediate files)

Open the saved thumb jpg in Affinity Photo

Select the whole image and Copy

 

Paste into Affinity Designer labelled thumbs working document (I keep three or four images with text reading Video and Audio in a working document)

 

Align text label and image horizontally and to bottom

Group text and image

Select group

File > Export

Preset: SVG (for export)

Area: Selection without background

 

Name the exported svg the same as the video or audio and the .jpg (if needed) so they group together in a file list:

name.jpg

name.svg

name.m4v

[v_kyr]

Just one small NOTE, there is no need to use both apps (Affinity Photo & Affinity Designer) together here, the whole procedure can be also done in just one of these apps. Let's say Affinity Photo due to better pixel based image ratio cropping here, the text handling and SVG export is pretty much the same. - Only the APh canvas/viewport looks visually much more pixelated here, since it's first of all a bitmap based image manipulation app. But the generated result is the same, text will be generated SVG based!

[Stephen Hart]

"Just one small NOTE, there is no need to use both apps..."

 

I was guessing that was the case, but I haven't worked through the process to see how to do it all in Photo. (It may also be the case that I could have done it all in Photoshop, but again, didn't explore that process.)

I will definitely look at streamlining the process in Affinity Photo.

[Stephen Hart]

One final followup, in case it might help someone else.

 

"Just one small NOTE, there is no need to use both apps..."

I tested this today and it worked fine.

As you wrote—"the APh canvas/viewport looks visually much more pixelated here"—the text looks like a bitmap, but the result is the same.

See the two last thumbs, grouped together, on this page. The left one was made with both Affinity Photo and Affinity Designer. The right one was made entirely in Affinity Photo.

https://onh.eugraph.com/mammals/chipmunk/index.html

 

Here are my steps:

Open original image in Affinity Photo

Crop to desired size (I use 128x96)

Create a text layer and create text (I used Helvetica Bold 20 white)

Align text label and image horizontally and to bottom

Make sure both layers are checked.

File > Export

SVG (for export)

Name the exported svg the same as the video or audio (and the .jpg if needed*) so they group together in a file list:

name.jpg

name.svg

name.m4v

 

* I need the jpg because the extension I use in Dreamweaver 2021, PVII Magic Box, won't accept .svg files as thumbs (in macOS) so I have to first link a .jpg, then change it outside of the Magic Box interface.

[Stephen Hart]

12/29/2020 Removed the second svg from the published page noted above.