Best practices for keeping svg exports small and portable

[Tim Black]

I am trying to promote the use of svg-exported draw.io diagrams for the standard image format for technical documentation at my company. These images are stored in a git (Bitbucket Server) repo, alongside the source code they describe, and are referred to by relative paths in markdown image tags. SVG are generally smaller and render better in a browser bc of their inherent scaling design. In my experiments with png and svg, however, I've encountered some problems with using svg in this way, that I seek help and clarity on:

1. If my goal is to keep svg diagram size to a minimum, must I refrain from using raster/bitmap type Shapes from draw.io shape panel? As soon as I add a raster/bitmap shape to my diagram, like a picture of a PC or a Equipment Rack, the size of the exported svg balloons to greater than the size of the corresponding bmp.

2. When exporting the .svg, if I don't select "Embed Images", the file is of course smaller, but these raster images don't render, but more importantly, the svg doesn't render at all in Bitbucket markdown.

Are there ways to filter draw.io shapes to get vector-only shapes, so that when I insert them into my diagram, and export as svg without Embedding Images, the diagram will be as small as possible?

[Tim Black]

I've done some testing with svg/png exports of draw.io diagrams containing only simple shapes, +/- vector-based shapes, and +/- raster-based shapes. The takeaways from this experiment are:

* standard drawing shapes look significantly better in svg than in png

* svg drawings results in significantly smaller file sizes, but only if raster images are not embedded inside

* embedding raster images in svg defeats the purpose of using svg by bloating it

* Best Practice: don't use raster images in drawings, only embed svg-based images

* [This draw.io task](https://trello.com/c/rkYsY2B3) tracks the work of making it easier for users to search svg-only shapes. Since I'm the only person who's voted on this, I'm not optimistic that it'll get done.

Curious if others out there can validate my assumptions or provide other best practices for keeping draw.io-generated technical drawings as small as possible. Thanks.

[Mate]

The only raster stencils in draw.io are in the Clipart group. If you use search in the sidebar, then you can get raster stencils from Iconfinder after the results from draw.io itself.

[Gaudenz Alder]

How did you embed the SVG in Bitbucket markdown?

[Tim Black]

Just like any image is embedded in bitbucket markdown. 

![alt text](../../my.svg)

[Tim Black]

Mate, thanks for your response. I do use the search in the sidebar to find shapes. But what I want it to NOT find raster shapes. Sorry, I am not familiar with Iconfinder, therefore do not understand your second sentence.