{"id":26388,"date":"2026-05-15T15:02:40","date_gmt":"2026-05-15T09:32:40","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=26388"},"modified":"2026-05-15T15:02:40","modified_gmt":"2026-05-15T09:32:40","slug":"hyva-theme-magento-2-wysiwyg-svg-module","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/hyva-theme-magento-2-wysiwyg-svg-module\/","title":{"rendered":"How to Use the hyva-theme\/magento 2-wysiwyg-svg Module?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By default, Magento blocks some SVG usage because of security restrictions. This is where the hyva-theme\/magento2-wysiwyg-svg module becomes useful.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this blog, we will understand what this module does, how to install it, and how to use it with a simple example.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is the hyva-theme\/magento2-wysiwyg-svg Module?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The hyva-theme\/magento2-wysiwyg-svg module allows you to safely use SVG files inside the Magento 2 WYSIWYG editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After installing the module, you can:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Upload SVG images<\/li>\n\n\n\n<li>Use SVG icons in CMS content<\/li>\n\n\n\n<li>Add lightweight vector graphics without converting them to PNG or JPG<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">SVG files are commonly used because they:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Load faster<\/li>\n\n\n\n<li>Stay sharp on all screen sizes<\/li>\n\n\n\n<li>Are good for icons and logos<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Here are some common use cases that explain why you should use SVG in Magento 2:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Logo images<\/li>\n\n\n\n<li>Social media icons<\/li>\n\n\n\n<li>Custom icons in CMS blocks<\/li>\n\n\n\n<li>Small design elements<\/li>\n\n\n\n<li>Responsive graphics<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Compared to PNG or JPG files, SVG files usually have a smaller size and better quality.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Steps to install the hyva-theme\/magento 2-wysiwyg-svg Module<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Run the following command from the Magento root directory:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"> composer require hyva-themes\/magento2-wysiwyg-svg<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">After installation, run these Magento commands:<br><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">php bin\/magento module:enable Hyva_WysiwygSvg\nphp bin\/magento setup:upgrade\nphp bin\/magento cache:flush<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Once the module is installed:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open Magento Admin<\/li>\n\n\n\n<li>Go to Content \u2192 Pages or Blocks<\/li>\n\n\n\n<li>Open the WYSIWYG editor<\/li>\n\n\n\n<li>Upload or insert SVG images<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">The module allows Magento to accept SVG files safely inside the editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let us consider one example and make this simpler:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Suppose you want to display a custom delivery icon inside a CMS block.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Upload a file named: product image.svg using the WYSIWYG media uploader.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Add the following HTML inside the CMS block:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"delivery-icon\">\n&lt;img src=\"{{media url='wysiwyg\/truck.svg'}}\" alt=\"Delivery Icon\" width=\"50\" height=\"50\">\n&lt;\/div><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">After saving the block, the SVG image will appear on the frontend.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you are using Hyv\u00e4 Theme, this module can help you manage icons and visual elements more efficiently while keeping your storefront fast and clean.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">At <a href=\"https:\/\/meetanshi.com\/contact-us.html\">Meetanshi<\/a>, we regularly work on Hyv\u00e4-based Magento stores, including custom SVG implementations, performance optimization, and frontend improvements.\u00a0<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Our team also helps businesses achieve better Lighthouse and PageSpeed scores while maintaining a smooth user experience.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34,5869],"tags":[],"class_list":["post-26388","post","type-post","status-publish","format-standard","hentry","category-magento","category-hyva-themes"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/26388","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=26388"}],"version-history":[{"count":1,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/26388\/revisions"}],"predecessor-version":[{"id":26389,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/26388\/revisions\/26389"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=26388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=26388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=26388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}