I've redone this post from its original version to hopefully make it easier to work with and include additional information I picked up from ongoing troubleshooting. I am building divs to use as notices (NOTE, WARNING, DANGER, etc.) with icons as background images. I've more or less figured out how to adjust the layout, spacing, etc., but I can't seem to get SVG icons to resize at all in PDF output.
I am using:
- Flare 2019r2
- Inkscape 0.92
- A placeholder free SVG icon grabbed off the web
- Java version 8 update 251, 64-bit
- Ghostscript version 9.52, 64-bit
Code: Select all
div.example
{
padding: 1em;
mc-auto-number-class: example;
mc-auto-number-format: '{b}EXAMPLE:{/b}';
mc-auto-number-position: inside-head;
border-radius: 5px;
border: solid 1px #283a88;
background-image: url('../Images/example_icon_optimized.svg');
background-repeat: no-repeat;
background-size: /*Entries vary as I try adjusting to different sizes.*/
}
span.example
{
display: block;
}
- Both the individual background- properties and the "background" shorthand property.
- Saving the SVG as an Inkscape SVG, plain SVG, and "optimized" SVG.
- Saving the SVG with and without viewboxing enabled (height/width both unspecified and specified).
- Editing the SVG directly through a text editor to change the dimensions/viewbox.
- Using EPS instead of SVG.
- Absolutely no size changes reflected in the Flare XML editor, EXCEPT for optimized SVGs which default to an arbitrary size overflowing the <div> (but not in the outputs).
- Size changes reflected normally in the Flare style editor preview.
- Size changes reflected normally in the HTML5 preview and output.
- Absolutely no size changes in the PDF preview and output.
We'll be moving to HTML5 output eventually, but PDF will be our main target for some time so I really need to get this working.