Using SVG files exported from Dorico

The SVG export feature is a very useful feature in Dorico if you want to embed a piece of notation in a document or a website and keep the image sharp. You can create multiple graphic slices in Dorico, name them, and export all of them with a single click: now you have a bunch of SVGs just waiting to be used.

However, things get a bit more complicated when you actually want to use them. Dorico does not embed any fonts in the SVG and it does not provide a way to convert them to paths either. The fonts aren’t even consistent across operating systems: in addition to the music fonts such as Bravura, an export on macOS will use “.AppleSystemUIFont” while Windows uses “Segoe UI”. This already means that opening a SVG file created in Windows will look different on macOS, even if you have Dorico and its music fonts installed on both systems.

In fact, the Dorico Help documentation mentions the following:

To ensure that the SVG file appears correctly if embedded in a web page, you can open the SVG file in an illustration program and convert all font characters to outline paths, then re-export the SVG file and embed that file. Alternatively, you can use web fonts to ensure that the necessary fonts are available on the web server.

In addition to the font problem, selecting the “slice” size in Dorico is done by hand, which likely ends up with some extra white space that you don’t need.

Processing the SVGs in Adobe Illustrator

Before re-exporting the SVG from Adobe Illustrator, you may want to trim away the extra white space:

1. From the Properties panel, under Document, select Edit Artboards.
2. Open Preset dropdown menu, select Fit to Artwork Bounds.

The extra space should be gone. To save the SVG:

1. From the File menu, select Save a Copy. (You do not want to overwrite your original file, just in case). Don’t use Export since that will not create the intended results.
2. Choose the location and the filename, which by default adds “copy” to the end of the original filename. Click Save.
3. For the SVG options, under Fonts, open Type dropdown menu and select Convert to outline.
4. Optional: if you want to use the SVG in web pages, check Responsive. You may have to click More Options to make this option visible.
5. Click Ok.

You may see a “Transforms are expanded” warning but I have not yet faced any problems.

Issues

• Adobe Illustrator does not recognize the Academico Italic fonts exported by Dorico but renders them as regular.