When working with Magento 2 and Hyva Theme, sometimes you may want to add SVG icons directly inside CMS pages, blocks, or product descriptions using the WYSIWYG editor.
By default, Magento blocks some SVG usage because of security restrictions. This is where the hyva-theme/magento2-wysiwyg-svg module becomes useful.
In this blog, we will understand what this module does, how to install it, and how to use it with a simple example.
What is the hyva-theme/magento2-wysiwyg-svg Module?
The hyva-theme/magento2-wysiwyg-svg module allows you to safely use SVG files inside the Magento 2 WYSIWYG editor.
After installing the module, you can:
- Upload SVG images
- Use SVG icons in CMS content
- Add lightweight vector graphics without converting them to PNG or JPG
SVG files are commonly used because they:
- Load faster
- Stay sharp on all screen sizes
- Are good for icons and logos
Here are some common use cases that explain why you should use SVG in Magento 2:
- Logo images
- Social media icons
- Custom icons in CMS blocks
- Small design elements
- Responsive graphics
Compared to PNG or JPG files, SVG files usually have a smaller size and better quality.
Steps to install the hyva-theme/magento 2-wysiwyg-svg Module
Run the following command from the Magento root directory:
composer require hyva-themes/magento2-wysiwyg-svg
After installation, run these Magento commands:
php bin/magento module:enable Hyva_WysiwygSvg php bin/magento setup:upgrade php bin/magento cache:flush
Once the module is installed:
- Open Magento Admin
- Go to Content → Pages or Blocks
- Open the WYSIWYG editor
- Upload or insert SVG images
The module allows Magento to accept SVG files safely inside the editor.
Let us consider one example and make this simpler:
Suppose you want to display a custom delivery icon inside a CMS block.
Upload a file named: product image.svg using the WYSIWYG media uploader.
Add the following HTML inside the CMS block:
<div class="delivery-icon">
<img src="{{media url='wysiwyg/truck.svg'}}" alt="Delivery Icon" width="50" height="50">
</div>
After saving the block, the SVG image will appear on the frontend.
Conclusion
The hyva-theme/magento2-wysiwyg-svg module is a simple and practical solution for adding SVG support to the Magento 2 WYSIWYG editor. It allows store owners and developers to use lightweight, scalable graphics directly inside CMS pages and blocks without extra complexity.
If you are using Hyvä Theme, this module can help you manage icons and visual elements more efficiently while keeping your storefront fast and clean.
At Meetanshi, we regularly work on Hyvä-based Magento stores, including custom SVG implementations, performance optimization, and frontend improvements.
Our team also helps businesses achieve better Lighthouse and PageSpeed scores while maintaining a smooth user experience.
