10Web Builder has made it super easy to use SVG icons in your website designs. SVGs are great because you can make them bigger or smaller without losing quality, and they don’t make your website slow. Here’s how you can use them safely and creatively in 10Web Builder:
- SVGs are special images that stay sharp at any size and are very light, which means they help your website load fast.
- You can pick icons from Icon library or upload your own SVG icons.
Important:
10Web Builder does not provide automatic sanitization for SVG files. To ensure secure SVG uploads, please utilize the ICON widget. This process ensures thorough sanitization of the SVG files for safe usage.
Enabling SVG import
When uploading an SVG file for the first time, you will receive a notification highlighting the security risks associated with uploading files. If you are aware of the risks and wish to proceed, select the Enable button.
Upon enabling, you will be redirected to the Media Library where you can upload/insert the file.
- Navigate through WordPress Dashboard to Elementor > Settings. Within the settings menu of Elementor, locate and click the Advanced tab.
- Look for the Enable Unfiltered File Uploads option and change its setting to Enable using the dropdown menu.
- Save Changes to secure your new settings.
With SVG uploads now enabled, you can go back to editing your page.
How to upload your SVG icon
In any 10Web Builder widget that lets you use icons, look for the Upload SVG button. Click it, and you’ll go to where you can choose or upload files. Upload your SVG icon here.
Important:
Uploading SVG files from unverified sources can introduce security vulnerabilities. We advise using only SVGs from reputable sources you trust. Please ensure you fully comprehend and accept the associated security implications before enabling this feature.
Tips for better SVG use
Avoid inline styles when making your SVGs. When you save your SVG, don’t add styles like colors or sizes directly in the file. This lets you use 10Web Builder to change how the icon looks more easily.