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

### 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 **p**lace**h**older square. **Prefix the id with `ph-`**. For example: `ph-child`.
6. Drag and drop the PNG(!) file into Illustrator (this will automatically be a linked file).
7. 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**:

<img width="612" alt="image" src="https://user-images.githubusercontent.com/9831678/206914491-af62852c-a91b-4193-a642-1725fe1eb2fb.png">


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>
```

<img width="116" alt="image" src="https://user-images.githubusercontent.com/9831678/206913898-88b7b011-f6b8-49bc-bc5d-d17044153ed6.png">

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>
```

<img width="84" alt="image" src="https://user-images.githubusercontent.com/9831678/206913977-a99c3f56-f3c7-4d84-be4b-66d4444cd96c.png">


Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

User/Designer steps:

Preprocessing strategy:

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

User/Designer steps:

Preprocessing strategy:

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions