SVG geometry skewed - SVG, WMF and PNG comparison
Jul 20, 2020
Hi folks. I just have a quick question regarding SVG image imports (from Powerpoint).
Undoubtedly, SVG imports are super crisp and full of vectory goodness when imported into a Storyline file, though I do find that occasionally the scaling might be a little bit off on the height factor for some reason.
I find that PNG files need to be imported at twice the intended final size to allow for the modern player scaling to fit high-resolution monitors - the edges are a little bit fuzzy but it's "almost" tolerable.
WMF files have to be scaled up HUUUUGE in whatever vector software before being imported in order to maintain a crisp look, though I think this isn't even a solution anymore.
All these files look great when imported onto the slide.
But... (and this is where the question lies)...
when previewed within Storyline the disparities between the formats becomes obvious and not in a good way.
Why does the geometry of the SVG file screw up so that the vector shapes are shifted (almost imperceptibly in large scale) but enough to look odd?
This is most apparent when the SVG file is scaled down to a much smaller size and the shapes start blending into each other. It's horrible.
Super crisp. But horrible.
The PNG still maintains that faint edge of diffusion but still holds it together.
The WMF simply looks awful at the large size (rasterised jagged edges) but it does maintain the same fuzziness of the PNG at the smaller size.
The sooner Storyline can import SVG shapes directly into modules the better things will be for anyone who cares about clean and sharp graphics within a build.
Here's a link to the file in Review for anyone who cares to see the comparison live.
3 Replies
Why does the geometry of the SVG file screw up so that the vector shapes are shifted (almost imperceptibly in large scale) but enough to look odd?
If this is a genuine question, and not a rhetorical rant, there is an answer. When you import SVG from PP, you are getting a bunch of individual objects that are grouped. what you describe is exactly what always happens when groups are resized. The SVG to PP to SL is an urban myth; you are still getting objects, not vectors. You can probably get better results exporting from the creating software as png, or even jpg, At least those can be resized.
Hi Walt. Thanks for the response. Not sure why you are suggesting my (genuine) question was somehow a 'rant'.
I'm also not sure why you think that "SVG to PP to SL is an urban myth".
I utilise the SVG to PP to SL workaround all the time to import bespoke icons and shapes to Storyline and when they are imported they behave exactly like the built-in shape and/or icon options, in that the stroke and fill of each object can be adjusted, etc.
What do you mean by 'object'? What is the definition of an object within Storyline, as opposed to a shape?
AFAIK, the built-in shape options within Storyline create vector 'objects/shapes' that can be scaled up and colourised (stroke and fill) and behave almost exactly like how a vector object behaves in dedicated vector software, like Illustrator. Functionally, and semantically there is no difference.
Maybe I am incorrect in assuming that Storyline has any vector capabilities, and only appears to behave as it does.
My question still stands, and I guess it goes to the core of some of the long-standing issues with Storyline's calculations of geometry, but if I import, say, the icon above as a single SVG file it is fine, but if I import it as a group of SVG objects, whilst they look perfect within SL360, when previewed they offset slightly.
Why?
As my demo example above illustrates, whilst the PNG is bang on perfect both in SL AND preview, there is a subtle degree of 'softness' to the edges. Whereas the SVG shape/object is pin-sharp in SL and preview, but visually skewed in preview.
And, again, how is it not a vector (or vector-like) object if the SVG that is imported can be scaled up enormously without becoming distorted and jagged? Is that not THE definition of a vector file?
Even now there is often a visual 1pixel difference between an exactly identical sized shape box compared to a picture box, or an odd-shaped box. See screenshot above of 3 blue buttressing rectangles with no stroke and mathematically aligned. The light blue is stacked above the dark blue, whilst the mid-blue is stacked at the bottom. Despite the lighter blue shapes both having the same X-axis number, there is a... mathematical glitch... with the dark blue shape in that it somehow visually extends beyond its geometrical dimensions.
This presents some difficult design/philosophical decisions in that in order to achieve visual consistency the mathematical geometry will have to (illogically) distorted. :)
This glitch has been a cause of my frustration for years. It's not just imported SVG shapes from PowerPoint that have scaling issues. Even the shapes that are created from within Storyline suffer from the same problem. I don't have any solutions to offer but hopefully if an Articulate staff member sees this, they will know that there's an issue with how Articulate interacts with vector shapes in general.
Here are some shapes that I created inside of Storyline 360 (by going to "Insert" > "Shapes"). I then added some circles on top of the Hexagons and centered them vertically and horizontally using the align tool in the "Format" tab. I then grouped it and duplicated it 8 more times to make 9 Hexagon groups. I resized those groups to demonstrate the scaling issue.
It looks fine on the Articulate stage:
But when I go to preview it, you will notice hexagon 4, 5, 6, 7, 8, 9 are all experiencing mathematical glitches and things no longer appear centered:
I have been experiencing this issue with Storyline for many years. It existed in Storyline 2 as well. It's been a while since I've used Storyline 1 but I wouldn't be surprised if the issue existed there too.