SVG Graphic Editor: Transform Controls and 47 Built-In Shapes
The DesignTech AI graphic editor has a new set of capabilities for working with SVG shapes. Transform controls — position, rotation, scale — now work directly on the canvas, and the shape library has grown to 47 built-in shapes with consistent behavior across all of them.
What's New
Drag-to-transform. Shapes can now be moved, resized, and rotated using handles on the canvas. Previously, transformations required entering specific values in the properties panel. Now you can grab a corner handle to resize, grab the rotation handle to rotate, or drag the shape to reposition — all with visual feedback.
Per-shape transforms. Position, rotation, and scale values are stored per shape and preserved when templates are applied. This means layout presets can include shapes with specific transforms that are maintained across generations.
47 built-in shapes. The shape library now includes 47 shapes across categories: geometric (rectangles, circles, triangles, polygons), abstract (blobs, organic forms), UI elements (arrows, callouts, badges), and decorative (stars, bursts, dividers). All support the full transform workflow.
Per-slide backgrounds. Carousel graphics can now have different background images on each slide. Previously, background images applied globally to all slides in a carousel. This enables more varied multi-slide layouts for social content.
How the Layer System Works
The graphic editor is layer-based. Each element (shape, text, image, logo) occupies a layer with its own transform properties. The transform controls operate on the selected layer.
Layers are organized as a stack — elements higher in the stack render on top of elements lower in the stack. The layer order can be changed by dragging in the layer panel, or using keyboard shortcuts (Cmd+[ and Cmd+]) to move layers up or down.
For template-based generation, layers are mapped to content variables. A shape layer configured as a background fills with the AI-selected background image. A text layer configured as a headline fills with the generated headline copy. The layer system is what makes templates pixel-perfect without manual post-generation editing.
Working with Brand Kit Shapes
Shapes defined in your Brand Kit layout presets automatically inherit brand colors when inserted. The primary brand color applies to filled shapes, and the secondary brand color applies to strokes. These defaults can be overridden per shape, but the Brand Kit provides a sensible starting point for on-brand compositions.
CTA Layer Handling
CTA (call-to-action) layers have different padding behavior than other text layers. CTA text is sized to fill its bounding box, then padded symmetrically. Non-CTA text layers use the standard text padding model. This distinction ensures button-style CTA elements render consistently regardless of text length.
Practical Design Patterns
Social carousel templates. Use per-slide backgrounds and shape overlays to create varied slide designs within a consistent template. The first slide might have a full-bleed image with a text overlay; subsequent slides might use colored shape backgrounds with different content blocks.
Infographic generation. Combine geometric shapes with text layers and icon elements to generate data visualization graphics. The transform system makes it possible to create precise layouts that the AI can populate with content.
Brand asset generation. Use logo layers, brand color shapes, and typography layers to generate consistent branded assets across formats — social banners, email headers, document covers — all from a single template configured in the graphic editor.
For a full walkthrough of the graphic editor, open Brand Kit in your DesignTech AI account and navigate to the Layout Editor tab.