Scalable Vector Graphics in Joomla 4

Scalable Vector Graphics (SVGs) work better for logos, but are not enabled by default in Joomla 4

Scalable Vector Graphics have been around since before the millennium. SVG is an open standard for vector graphics stored in XML text files. SVGs can however also contain code and other artefacts so theres an abundance of caution in Joomla towards them, and they are not enabled by default. That said, in 2023, they are by far the best graphics format for logos and can be useful elsewhere in your Joomla CMS site. Other graphics formats look jagged in comparison.

This article explains how to get SVG enabled in Joomla, what the issues are, and why its worth the effort

TL:DR: SVG is better in so many ways for crisp text on responsive sites and it is worth doing the work to understand how to use SVG with Joomla safely. Takes about 30 minutes.

Browser support for Scalable Vector Graphics (SVG)

SVG files are supported now in all browsers you are likely to encounter, both desktop and mobile. Theres no reason not to use them because of web browser support.

SVG Logo in the default Joomla site Cassiopeia template

SVG's are especially suited to brand logos and an SVG file is used as the brand logo for Joomla 4's Cassiopeia template. Here it is on a black background so you can see it.

It is placed it in the right folder as part of the template so it can be used by Joomla without regard to the svg settings for articles and media manager. But for you to use an SVG in Joomla you need to go on a crash course in how to enable SVG and make your SVG files work properly with Joomla.

Enabling the SVG format in Joomla

SVG's can be enabled via some changes to the media manager options in Joomla Administration.

• Add – svg to Allowed Extensions
• Add – svg to Legal Image extensions (file types)
• Add – image/svg+xml to Legal MIME types

Now you should be able to upload and use sanitised svg files using the Joomla administrator backend. There's a gotcha though. It is an important but complicated issue about svg.

Issues with SVG files in Joomla

The most appropriate example SVG file I could find to use is the actual logo for SVG from its project at W3C. Here it is. It is rendered at 900x900 which is three times the original resolution. If you resize your browser it will shrink and grow with full fidelity and no jaggedness. However Joomla's media manager can't upload it as of this writing, it simply silently fails (v4.3.4) and will soon (in a future release) generate a better error The file looks suspicious, therefore cannot be uploaded. This is because Joomla checks svg files for code or other content that Joomla does not allow for security reasons. In order to upload it for use in this page as an example I had to use my hosting providers tools to upload it directly into the correct folder. This is far from satisfactory and not recommended because security issues should be understood before jumping to such a drastic solution as avoiding all Joomla's checks and balances. Anyway it looks great, especially the curves and lettering at any size.

Creating SVG files that work in Joomla

So, because SVG files need to pass through a sanitiser in Joomla you would need to sanitise your svg files before using them with Joomla. The svg sanitiser looks for suspicious artefacts and won't upload the SVG if it finds them. So you need to remove the offending artefacts from the svg file yourself to make it best acceptable to Joomla. I found two ways to do that easily. The first way is to export it with 'text as curves' in Affinity Publisher, Designer or Photo. The second is to upload it to "svgomg" where a web application can sanitise the svg for you and you can download the resulting clean svg file.

SVG Affinity export

SVG Logo exported by Affinity Publisher with 'text as curves' set

SVG svgomg sanitised

SVG Logo sanitised by the web app svgomg

A png for comparison

SVG Logo converted to a png created from the svg by exporting it again using Affinity Photo.

Is this really worth the effort for Joomla

If a picture paints a thousand words then this one is one of those. Each of the seven logo representations is different, and each shows those differences. You can clearly see that the svg files are far better at rendering the text and the curves. The small png files used for the intro article logo are particularly crude and jagged. SVG files are proper vector based files rather than simple graphics files. You will notice the difference especially for logos. 

References

See also:

• Can I use... SVG (basic support) — Browser support for SVG
• Template SVG Logos — Joomla Documentation
• MediaManager: improve error handling #38536 — Joomla GitHub
• J!4.2: How to use a SVG file as a site logo — Joomla Forum
• SVGOMG – provides you several options to clean and compress your SVG files. Clean up, remove, merge, minify.
• SVG-Edit – a Powerful SVG-Editor for your browser
• https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Introduction – Mozilla deveoper network

Note: Except for the 'cassiopeia' logo, the SVG logos on this page are derivitives of the SVG logo and therefore By W3C SVG Logo, CC BY-SA 4.0, Link