Excalidraw-Obsidian 1.7.27 - Image editing power tools

TL;DR

Use “Import an SVG file as X-collateral drawings” to turn SVG artwork into editable Excalidraw elements you can recolor and rearrange.

Briefing Cornell Notes

Briefing

Excalidraw-Obsidian 1.7.27 adds two image “power tools” aimed at making imported graphics easier to reuse and more consistent inside Obsidian notes. The headline feature lets users import SVG files as editable Excalidraw-style “X-collateral drawings,” turning static vector art into a canvas that can be recolored and rearranged. The workflow is straightforward: download an SVG (for example from the Noun Project), drag it into Obsidian, then use the new command “Import an SVG file as X-collateral drawings” from the Obsidian menu or command palette. Once inserted, the SVG’s shapes become editable elements—colors can be changed piece by piece (e.g., swapping the lady’s outfit to red, the gentleman’s clothing to dark blue, and matching shoe colors), and parts can be separated for reuse. The feature is labeled experimental, with some limitations, but the practical payoff is clear: SVG icons and illustrations can be customized to match a specific visual style rather than being treated as fixed artwork.

The second tool addresses a common frustration when building “book on a page” style compositions from multiple embedded images: resizing one element can distort relative scale when the overall canvas changes. By default, inserting an image preserves its surface area, so when additional elements are added to the drawing, the image’s relative size can appear to shrink. To prevent that drift, the update introduces an “insert with 100 percent” behavior. Users can embed an image at a forced 100% scale by holding Alt while inserting (Alt+Enter in the demonstrated flow). After that, the embedded image retains its sizing even as the surrounding drawing grows—so text and other overlaid elements stay visually aligned.

The transcript walks through a scenario where two embedded images initially look similar, but after editing the composition (adding new shapes/text), one image’s internal elements appear to scale down relative to the other. Re-inserting with the 100% option fixes the mismatch: the 100%-scaled image remains stable, while the non-100% image effectively becomes smaller relative to the expanded canvas. There’s also a way to verify and apply the setting in Markdown: switching to “open as markdown” shows embedded file metadata including “size 100 percent,” and re-rendering in Excalidraw view keeps the forced scale.

In short, the update targets two pain points in visual knowledge management: converting SVG artwork into editable, customizable Excalidraw elements, and locking image scale to 100% so multi-part layouts don’t lose consistency over time. For users assembling complex pages from smaller components—like decomposed figures stored in literature notes and then combined into a single narrative page—the Alt+Enter 100% insertion is positioned as the key technique to keep everything aligned.

Cornell Notes

Excalidraw-Obsidian 1.7.27 introduces two practical image “power tools.” First, it can import SVG files as editable Excalidraw-style “X-collateral drawings,” letting users recolor and even separate parts of the illustration instead of treating it as a fixed graphic. Second, it adds a way to force embedded images to render at 100% scale using Alt+Enter (or equivalent Alt-based insertion), preventing relative size changes when the surrounding drawing grows. This matters most for “book on a page” layouts built from multiple smaller images, where mismatched scaling can make text and figures look inconsistent. The 100% setting can also be seen in Markdown as “size 100 percent.”

How does importing an SVG as an “X-collateral drawing” change what you can do with the artwork?

After downloading an SVG (e.g., an icon from the Noun Project) and inserting it via “Import an SVG file as X-collateral drawings,” the SVG becomes editable elements on the Excalidraw canvas. That enables direct customization such as changing the lady’s clothing color to red, the gentleman’s clothing to dark blue, and matching shoe colors to black. It also allows decomposition—using only a portion of the illustration (like just the figure) when that’s all the layout needs. The feature is marked experimental, and some behaviors may not work perfectly.

Why does image scaling drift happen when building a multi-part “book on a page” composition?

When images are inserted normally, they preserve their surface area. As additional elements are added to the overall drawing, the image’s relative size can appear to shrink compared with newly added text or shapes. In the transcript’s example, two embedded images initially look similar, but after editing the canvas (adding extra elements), one image’s internal text/graphics no longer match the other’s scale.

What exact interaction forces an embedded image to stay at 100% scale?

Hold Alt while inserting the image—shown as Alt+Enter in the workflow. The result is that the embedded image retains its sizing even after the drawing is edited and expanded. The transcript emphasizes that this prevents the “relative size gets smaller” effect seen with standard insertion.

How can you confirm an image is embedded with 100% scaling?

Switch to Markdown view (“open as markdown”) and check the embedded file metadata. The transcript shows an entry indicating “size 100 percent” after the image name. Returning to Excalidraw view keeps the image forced at 100%.

What’s the practical use case for the 100% insertion feature?

It’s especially useful when a larger page is assembled from smaller decomposed pieces—such as individual drawings stored in literature notes and then combined into a single narrative “book on a page.” For that workflow, forcing 100% helps keep text and figure proportions consistent across the combined layout, avoiding manual resizing every time the composition changes.

Review Questions

When would standard image insertion cause two figures to look mismatched after editing, and what mechanism causes that mismatch?
What does “size 100 percent” in Markdown indicate, and how does it affect what you see when returning to Excalidraw view?
How does importing SVGs as “X-collateral drawings” change the workflow compared with inserting an SVG as a non-editable embed?

Key Points

1
Use “Import an SVG file as X-collateral drawings” to turn SVG artwork into editable Excalidraw elements you can recolor and rearrange.
2
Download SVGs (for example from the Noun Project) and insert them through the Obsidian menu or command palette to access the experimental SVG-to-X workflow.
3
Normal image insertion can cause relative scaling issues as the overall canvas grows, making text and figure proportions drift.
4
Force embedded images to 100% scale by holding Alt during insertion (shown as Alt+Enter).
5
A 100%-scaled embed remains stable when additional elements are added to the drawing, preventing mismatched layouts.
6
Verify the 100% setting in Markdown view where embedded files show “size 100 percent.”
7
For multi-part “book on a page” compositions built from smaller pieces, 100% insertion helps keep everything visually consistent.

Highlights

SVGs can be imported as editable “X-collateral drawings,” enabling per-shape recoloring and selective reuse of parts of an illustration.

Alt+Enter insertion forces embedded images to render at 100% scale, preventing relative size shrinkage when the canvas expands.

Markdown view reveals the “size 100 percent” flag for embedded images, making the scaling behavior auditable.

The 100% workflow is tailored for assembling complex pages from smaller decomposed drawings stored in literature notes.

Topics

SVG Import
Image Scaling
Excalidraw
Obsidian
Markdown Embeds