30 Mar 2022

Stamp markup using SVG file

Stamp markup using SVG file

Want to add custom SVG markup, as a Stamp?

We have a couple of blog posts on adding Custom Markups based on Using Autodesk.Viewing.MarkupsCore extension:

In this blog, I will add SVG, like Michael's example, but allow it to be rotated and moved, like Petr's example.

Start With Custom SVG Files

I found some SVG files on the bootstrap website to test with. You can select any of the icons and download them as SVG: e.g. https://icons.getbootstrap.com/icons/badge-4k/
I also took the Viewer icon from the Forge Documentation site.

The same restriction applies here as in the case of the Smiley sample: "The extension cannot currently deserialize custom markups from an SVG; you would have to parse the markup manually"

When running the sample, the available SVG files will be listed in a small panel in the top left corner.
When you click on them the SVG file's content will be fetched and passed to the StampExtension, and then it will go through EditModeStamp -> StampCreateAction -> MarkupStamp


SVG Path or SVG Group

The markup's shape, in this case, will be a group instead of a path, because the SVG file can have multiple paths in it already. In order to normalize the size and positioning of the SVG file content, I placed the whole thing in an additional group where I can apply translate and scale. See MarkupStamp constructor()

The code relies on the values of the viewBox attribute of the SVG element to set the scale and translate of the markup created from it. It assumes that the min-x and min-y part of it are 0.

You can find the source code here: https://github.com/wallabyway/offline-pdf-markup/tree/master/docs/adamn

and a Live DEMO here: https://wallabyway.github.io/offline-pdf-markup/adamn/drag-drop-svg.html


Related Article

Posted By

Michael Beale

Michael Beale

Michael Beale is a senior software engineer at Autodesk, where he has been a globe-trotting technical advocate for Forge. Michael focuses on connecting Autodesk cloud data and Autodesk Forge APIs to the browser. He’s also contributed to Autodesk Homestyler, the Forge Large Model Viewer (LMV), Autodesk Prooflab, Stereo-Panorama service with webVR and recently 3D formats, such as glTF and 3D-Tiles-Next. Twitter:...

Adam Nagy

Follow @AdamTheNagy Adam Nagy joined Autodesk back in 2005 and has been providing programming support, consulting, training and evangelism to external developers. He started his career in Budapest, then worked in Prague for 3 years and now lives in South England, UK. At the moment focusing on Inventor and Fusion 360, plus cloud and mobile related technologies. Adam has a degree in Software Engineering and has...