SVG Graphics: Tips and Sizing

SVG Graphics are great in general because they are both dynamic and also very small.  This means you can have a large image "visually" yet the actual size in bytes will be quite small. Much smaller than any other image type. Also, as they are vector based, you can increase the size visually and you won't get that "stretched" and "pixelated" look and feel.

One problem though people run into is that they didn't create the SVG graphic and its default size is much larger than desired. When you drop an SVG graphic into a Flow course, the graphic will grow to fit the available size of the container which may be too big or too small. Of course one way to resolve this would be to crack open your SVG compatible program, such as Illustrator, and make adjustments there, but that isn't always the quickest and easiest way to perform this task.  

Let's say you started with this image.

Download SVG version

When I put this into dominKnow | ONE it will stretch to fit the size the container it is in. Of course you CAN control the width and offset of the container and thus effect the size, but that isn't always the desired effect.

Instead of using this, you can instead utilize CSS to adjust the SVG graphic.

1. Select the graphic
2. From the ribbon tool bar select: Animate -> Effects -> Custom CSS
3. In the right flyout adjust the settings as desired and add your CSS
   1. If you don't want to see it "grow" or "shrink" set the duration to Zero (it defaults to one second)
4. To change the height add: height: 50px; (or whatever size you are aiming for)
5. To change the width add: width: 50px; (or whatever size you are aiming for)

Note: You only need to change the height or width. The SVG will automatically adjust the other setting and maintain the aspect ratio.

And that is all there is to it. Of course now that you know where the "apply" CSS action is, you can do all sort of things to other objects as well!

Additional Resources:

This is a great site for some additional tips and tricks: https://css-tricks.com/using-svg/

Inkscape: Great free design tool that can produce SVG graphics and more.