🚀 [EPIC] Preprocess linked files to recycle/reuse SVG objects

[kalaschnik]

User/Designer steps:

1. Export your target SVG as SVG (this will be your reference) and PNG (this will be your linked placeholder; size/quality doesn’t matter) into the /assets/ directory
2. Uniquely rename both files (e.g., child.svg and child.png, respectively)
3. Within Illustrator, create squares (make sure they are squares with the same width/height) having your desired target size and location within your composition (you can add a fill to make them visible, avoid strokes).
4. Provide a unique id for the placeholder square. Prefix the id with ph-. For example: ph-child.
5. Drag and drop the PNG(!) file into Illustrator (this will automatically be a linked file).
6. Note: You don’t even need to place the PNG file in your square or resize it to match the square's bounding box. It can be at any location in your composition. Only the placeholder rectangle defines your target location and size:

9. Provide a unique id for the linked PNG file. Prefix the id with link-. For example: link-child.
10. The ids for the placeholder square and linked PNG should be identical apart from their prefix (ph-child & link-child).
11. If you re-use an object multiple times, incorporate other naming strategies to guarantee naming uniqueness (e.g., link-slide2-child and ph-slide2-child respectively). Or, if you use the same object multiple times on the same slide, start numerating it (e.g., link-slide2-child1, link-slide2-child2, and ph-slide2-child1, ph-slide2-child2, respectively)
12. Profit

Preprocessing strategy:

1. Search for all id that start with ph-
2. Store the following attributes: x,y,width,height
3. Remove the object from the SVG DOM
4. Paste those values to the corresponding link- object
5. Remove the overflow attribute, as this has no effect
6. Remove transform attribute (gets rid of matrix) as this will skew the positioning
7. Profit

The resulting code should look like this.

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	y="0px" viewBox="0 0 1366 768" enable-background="new 0 0 1366 768" xml:space="preserve">
	<rect id="ph-smc-child1" x="502" y="174" fill="#CCCCCC" width="36" height="36" />
	<rect id="ph-smc-child2" x="486" y="258" fill="#CCCCCC" width="68" height="68" />
	<rect id="ph-smc-child3" x="464" y="395" fill="#CCCCCC" width="114" height="114" />
	<rect id="ph-smc-child4" x="449" y="583" fill="#CCCCCC" width="142" height="142" />
	<image x="502" y="174" width="36" height="36" id="link-smc-child1" xlink:href="child.svg">
	</image>
	<image x="486" y="258" width="68" height="68" id="link-smc-child2" xlink:href="child.svg">
	</image>
	<image x="464" y="395" width="114" height="114" id="link-smc-child3" xlink:href="child.svg">
	</image>
	<image x="449" y="583" width="142" height="142" id="link-smc-child4" xlink:href="child.svg">
	</image>
</svg>

If you remove the box in Step 3 from the DOM, the result will look like this:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	y="0px" viewBox="0 0 1366 768" enable-background="new 0 0 1366 768" xml:space="preserve">
	<image x="502" y="174" width="36" height="36" id="link-smc-child1" xlink:href="child.svg">
	</image>
	<image x="486" y="258" width="68" height="68" id="link-smc-child2" xlink:href="child.svg">
	</image>
	<image x="464" y="395" width="114" height="114" id="link-smc-child3" xlink:href="child.svg">
	</image>
	<image x="449" y="583" width="142" height="142" id="link-smc-child4" xlink:href="child.svg">
	</image>
</svg>