You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
Uniquely rename both files (e.g., child.svg and child.png, respectively)
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).
Provide a unique id for the placeholder square. Prefix the id with ph-. For example: ph-child.
Drag and drop the PNG(!) file into Illustrator (this will automatically be a linked file).
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:
Provide a unique id for the linked PNG file. Prefix the id with link-. For example: link-child.
The ids for the placeholder square and linked PNG should be identical apart from their prefix (ph-child & link-child).
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)
Profit
Preprocessing strategy:
Search for all id that start with ph-
Store the following attributes: x,y,width,height
Remove the object from the SVG DOM
Paste those values to the corresponding link- object
Remove the overflow attribute, as this has no effect
Remove transform attribute (gets rid of matrix) as this will skew the positioning
User/Designer steps:
/assets/
directorychild.svg
andchild.png
, respectively)ph-
. For example:ph-child
.link-
. For example:link-child
.ph-child
&link-child
).link-slide2-child
andph-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
, andph-slide2-child1
,ph-slide2-child2
, respectively)Preprocessing strategy:
ph-
x,y,width,height
link-
objectThe resulting code should look like this.
If you remove the box in Step 3 from the DOM, the result will look like this:
The text was updated successfully, but these errors were encountered: