"How do I add custom SVG to my 2D drawings?"
Well, I'm glad you asked. Here's how to do it...
Say you have this as your logo...
The SVG for it, looks something like this...
<?xml version="1.0" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" >
<rect x="0" y="0" width="210" height="210" stroke="black" fill="transparent" stroke-width="5"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
<circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
<ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
<line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>
<polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
stroke="orange" fill="transparent" stroke-width="5"/>
<polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
stroke="green" fill="transparent" stroke-width="5"/>
<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>
We want to add this logo to a 2D sheet, in the bottom right hand corner, like this...
To do this, we need to modify our SVG a little bit. We need to take out the style parameters (which are ignored) and wrap the SVG code in a <g> (an SVG group primitive), like this example:
<g transform="translate(3024 2160) scale(-2 -2)">
This let's me position and scale my logo on page. To position it in the bottom corner, I'll need the 2D sheet boundaries, provided by Forge-Viewer, like this...
var bounds = viewer.impl.model.getData().bbox.max;
> Z.Vector3 {x: 3024, y: 2160, z: 0}
The markup extension already handles SVG vectors natively, so now let's add our new logo as a markup layer called 'LogoLayer', with this code:
var markup = viewer.getExtension("Autodesk.Viewing.MarkupsCore");
markup.enterEditMode();
markup.leaveEditMode();
markup.loadMarkups(_markupdata, 'LogoLayer')
Fire up the browser, and you should now see the SVG logo appear on the page. I positioned my logo with the bounds information from above, and rotated my logo to give it a bit of style, like this:
<g transform="rotate(3) translate(${bounds.x-700} ${490}) scale(${scale} -${scale})">And That's it! You can try the DEMO
Click on the 'Stamp It' button, to see the logo appear.
Source code: GITHUB
To make your SVG logo behave like a markup item, where you can drag it around and scale it, will be a follow up blog post shortly.
Follow me on twitter for more blog posts like this here: @micbeale