Problem with SVG images in PDF output

[awinnefeld]

I am trying to use SVG images (for things like icons) in my output (PDF and HTML5), but it just won't work for the PDF version. At this point, I really need some help from more experienced folks to figure out what exactly is going wrong.

I have created these numbers in illustrator for testing purposes:

flare-numbers-screen-ai.png

I have included them in my HTML5 output, and they look as I want them to look:

flare-numbers-screen-ai.png

The trouble starts when I create my PDF target. There, I just get these black dots instead:

flare-numbers-pdf.png

So, dear Flare community, what are my options?
- It should be possible to include svgs in the pdf output, right? Or am I trying something that obviously can't or shouldn't be done?
- I don't think there is something fundamentally wrong with the svg files, but maybe there is some mistake - some Illustrator option that I should have used while exporting?
Btw, if I export the same files as EPS instead of SVG, I've got no problems in the PDF output. This isn't really an option though for the web output (or is it?).
- Is there some option I have to set in the PDF target that I might have forgotten about?
- Or is this a simply a bug that I should report to MadCap?

Thank you in advance,
Alexander

EDIT: We are running Flare 2018, if this is important for this problem.

[awinnefeld]

Just in case anyone runs into a similar problem: I solved it, it had more to do with Adobe Illustrator (and my inaptitude with it) than with Flare.

When exporting my SVG files from Illustrator, I selected the option "Internal CSS" for styling. When this option is used, Illustrator will divide all paths up into classes and style the classes with CSS contained in a <style> attribute in the <defs> section of the SVG file. The problem is that it won't specify what kind of styling is used. This works fine in browsers - they seem to just assume that you're using CSS for styling purposes. This is why my HTML5 output looked good. Some other output formats seem to be less forgiving though - they can't interpret the style information. Instead they'll just default to filling everything black. This is what happened in the PDF output (and also in the Flare preview).

I found two solutions for this:
1. Open the SVG file in a text editor and add the attribute type="text/css" to the style-element. Voilà, it works; or
2. Don't use the "Internal CSS" option when exporting. The same files exported with the "Inline style" option look ok right out of Illustrator.

[atomdocs]

Thanks for the update, that's good info. SVGs are great but they can be tricky.