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:
I have included them in my HTML5 output, and they look as I want them to look:
The trouble starts when I create my PDF target. There, I just get these black dots instead:
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.
Problem with SVG images in PDF output
-
- Propeller Head
- Posts: 32
- Joined: Thu May 17, 2018 1:55 am
- Location: Germany
Problem with SVG images in PDF output
You do not have the required permissions to view the files attached to this post.
-
- Propeller Head
- Posts: 32
- Joined: Thu May 17, 2018 1:55 am
- Location: Germany
Re: Problem with SVG images in PDF output
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.
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.
-
- Sr. Propeller Head
- Posts: 308
- Joined: Tue Jun 18, 2013 3:00 am
- Location: Eastern Seaboard, Thailand
- Contact:
Re: Problem with SVG images in PDF output
Thanks for the update, that's good info. SVGs are great but they can be tricky.
Tom
Flare 2022, Capture 7
Flare 2022, Capture 7