Can you utilize component custom properties in html-embed to have unique html-embed with different svg elements for each component?

TL;DR
  • Add custom properties like color and size to the component for SVG variations.
  • Use an HTML Embed to insert SVG code with placeholders referencing custom properties.
  • Apply different property values to each component instance for unique SVG variations.
  • Preview and adjust property values to ensure correct rendering of the SVGs in the project.

Modifying individual SVGs in components using custom properties allows for unique designs. Here's how to achieve it in Webflow:

​

1. Use Component Custom Properties

  • Add custom properties to the component for SVG variations. For example, color and size might be properties to modify.

​

2. Embed HTML with Properties

  • Insert an HTML Embed in the component.
  • Use placeholders in your SVG code that reference the custom properties. For example: <svg width="${widthProperty}" height="${heightProperty}" fill="${colorProperty}">.

​

3. Configure Each Component

  • Apply unique values to the custom properties for each component instance.
  • Ensure that each instance displays the desired variation of the SVG by inputting the respective property values.

​

4. Test the Outputs

  • Preview the project and ensure each component renders the SVG as expected.
  • Make adjustments to property values as necessary for visual adjustments.

​

Summary

By setting custom properties within Webflow components, you can dynamically modify SVG elements using HTML Embed, making each component instance visually distinct.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I start a Webflow interaction using custom JS code with only the data-w-id?
How can I play and loop a simple Lottie animation in Webflow, with the animation pausing on hover and resuming on mouse out?
How can I have a different navigation bar on page 2 and page 3 in Webflow without affecting the navigation bar on page 1?
How can I create an animated hero section on my website using Webflow?
What is the error message "Default not allow for this domain" in Webflow referring to?
How can I change the text color in a rich text field using Webflow? I've tried setting the color to the value stored in the collection's field but it's not working. The forum discussions on this topic are closed and the solutions are not visible.
How can I make it mandatory for users to choose one of the suggestions from Google Place Autocomplete before submitting a form on a landing page in Webflow?
How can I fix the issue with two scrollbars and scrolling on the page beneath instead of the overlay in Webflow, when using the "projects overlay" feature on my portfolio website? Also, how can I resolve the problem of the horizontal scroll getting stuck on the live page? Is there a solution to the lagging vertical scroll in the preview mode, possibly related to the issue with the horizontal scroll?
How can I make the content area in my Webflow layout expand to a height that pushes the footer to the bottom, even on screens with limited content?
How can I add a custom code on my Webflow portfolio website to enable free roam swipe functionality for draggable carousels, where the cards slide based on the power of the mouse drag effect?
Should I design the website on Webflow and export the code to host it on GoDaddy or is it better to design it directly on GoDaddy? Any tips or challenges I should be aware of?
How can I integrate third party software with Webflow's Logic feature?
How can I integrate Stripe Checkout on a Webflow site for a simple click payment option? Could you recommend any other checkout options similar to Stripe for a single item purchase?
How can I keep custom radio buttons selected once clicked in Webflow using custom code?
How can I create a dynamic lightbox for YouTube and Vimeo videos on Webflow that stops the video when the modal is closed?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?