Can I add an SVG code within the Navbar element on my Webflow site? I tried using the Embed widget within the Brand element, but nothing shows up. Is there something I am missing? Also, does the Free account support SVGs in Webflow?
TL;DR
- On Webflow Free account, upload SVG files as images since
<svg>embedding requires a paid plan. - Insert SVG as an image asset or via external hosting, ensuring code correctness and resolving style conflicts.
Adding SVG code to your Webflow site's Navbar can be executed through certain steps, but there are limitations on a Free account regarding custom code. Let’s break down your questions:
1. Understanding SVG Usage
- Free plan limitations: While SVG image files can be uploaded and used directly, using custom code blocks like
<svg>tag requires a paid plan. - Ensure your SVG code is correct; syntax errors can prevent it from displaying.
2. Using the Embed Widget
- Ensure Visibility: If your SVG code is valid but not showing, it might be due to CSS within your code or your page styles affecting visibility.
- Embed the SVG: Go to your
Navbar, insert a Div Block where you want the SVG, and use the Embed element within the Div for custom functionality (note: requires a paid plan on Webflow).
3. Workarounds on Free Plan
- Upload as Asset: Convert your SVG into a file and upload it as an image asset or via external hosting.
- Use Image Element: You can display your SVG by uploading it like a regular image, bypassing the need for
<svg>embedding.
4. Checking SVG Compatibility
- Webflow’s Guide: Review Webflow’s documentation to ensure compatibility and check if there are platform-specific tips or insights.
Summary
On a Webflow Free account, you can upload and use SVG files as images, but custom code requires a paid plan. For your Navbar, ensure the SVG code is correct and style conflicts are resolved. Consider converting SVG to image format if you're utilizing the free plan.
