Description
Sattive SVG Studio is the ultimate SVG power-up for WordPress. While WordPress blocks SVGs by default for security reasons, Sattive SVG Studio allows you to safely upload, sanitize, and visually edit vector graphics without ever leaving your dashboard.
Built with performance and user experience in mind, Sattive SVG Studio features a premium, node-based visual editor powered by Fabric.js. Whether you need to change the color of an icon, add a drop shadow, or reorganize the layers of a complex illustration, this plugin makes it as easy as using a professional design tool.
🌟 Core Features
- Secure SVG Uploads: Automatic XML sanitization strips malicious scripts and prevents XSS attacks on upload.
- Native Media Library Integration: View your SVG thumbnails perfectly rendered in the WordPress grid—no more blank document icons.
- Sattive SVG Studio Workspace: A complete visual editing environment built directly into the Attachment Details modal.
- Segment Selection: Click on specific shapes or paths within your SVG to edit them individually, just like in Figma or Illustrator.
- Live Appearance Controls: Instantly tweak Fill Colors, Stroke Colors, Stroke Weights, and Opacity.
- Advanced Effects: Add customizable Drop Shadows (Color, Blur, X/Y Offset) to any shape.
- Layer Management: Bring shapes forward, send them backward, duplicate, delete, or flip them horizontally/vertically.
- Canvas Controls: Apply a background color to your SVG or instantly center all objects.
- History Engine: Made a mistake? Use the built-in Undo/Redo buttons (or Ctrl+Z / Ctrl+Y keyboard shortcuts).
🚀 How It Works
- Upload an SVG to your Media Library.
- Click on the image and hit the blue “Edit SVG with Sattive SVG Studio” button.
- The Studio editor will launch. Click any shape to change its color, add a shadow, or move it around.
- Click Apply Changes. The plugin securely overwrites the original file on your server, instantly updating it across your website.
Third-Party Libraries
- Fabric.js (v5.3.1) – https://github.com/fabricjs/fabric.js (Licensed under MIT)
Installation
- Upload the
sattive-svg-studiofolder to the/wp-content/plugins/directory. - Activate the plugin through the ‘Plugins’ menu in WordPress.
- Go to Settings > Sattive SVG Studio to configure your general preferences (optional).
- Navigate to your Media Library and upload an
.svgfile to get started.
FAQ
-
Are my SVGs safe from malicious code?
-
Yes! Sattive SVG Studio includes a lightweight but strict sanitization protocol that automatically strips
<script>tags and dangerouson*attributes (likeonclick) the moment the file hits your server. -
Will this slow down my website?
-
No. The visual editor only loads in the WordPress backend. On the frontend, your SVGs are served as standard, lightning-fast image files.
-
Does this work with Elementor, Gutenberg, or Divi?
-
Absolutely. Because Sattive SVG Studio permanently updates the actual
.svgfile on your server, any page builder displaying that image will instantly show your updated edits.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Sattive SVG Studio – Secure SVG Management & Live Editing” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Sattive SVG Studio – Secure SVG Management & Live Editing” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0.1
- Major Update: Introduced the complete visual editor engine powered by Fabric.js.
- Added: Node-based segment selection for editing individual paths.
- Added: Layer management (Bring Forward, Send Backward, Duplicate).
- Added: Advanced Drop Shadow controls and History Engine (Undo/Redo).
- Fixed: Compatibility fix for WordPress SVG cropping errors.
1.0.0
- Initial release.
- Added secure SVG upload sanitization and thumbnail support.