Support an SVG-specific Element, as an alternative to the Image element

Currently SVGs can only be added through the Image element, or the Embed element. Both of these approaches have issues, which an SVG-specific element could solve neatly.

SVG via Embed element problems;

  • Embeds are not permitted within links, making menus difficult
  • Embeds cannot be previewed in the designer 

SVG via Image element problems;

  • The SVG cannot be affected by CSS when it is referenced through an <img> tag
  • The currentColor feature of SVGs does not function 
  • Creates a large number of HTTP requests for icon-rich designs 

SOLUTION

An SVG Element which...

  1. Works similarly to the Image element in terms of canvas placement and config options
  2. Can be associated with any SVG element in assets
  3. Adds Embed as an option, which will import the SVG content on build
  4. Support additional SVG element options, such as path-id, aria-hidden, focusable, and viewbox 

WHY THIS WOULD BE AWESOME

  1. It would allow SVG's to be used with currentColor, since embedding would be allowed
  2. It would avoid the need for Embeds (which cannot be used in links) 
  3. It would efficiently use embedded / inline data, rather than doing multiple HTTP requests
  4. It would support SVG-specific attributes such as aria-hidden, focusable, and viewbox 
  5. Allow SVG libraries, with path-id referencing
  • Michael Wells
  • Oct 26 2018
  • Reviewed
  • Sweet Bonanza commented
    21 Aug 16:20

    Hello all! Sweet Bonanza https://sweet-bonanza.com has been my go-to slot game for the past few weeks. The graphics are vibrant and the candy theme is just so much fun. The gameplay is really engaging, especially with the tumble feature that can keep the wins coming. The free spins round is where you can really hit it big, thanks to the multipliers that can get quite high. It’s not always easy to win, but when you do, it feels great. If you’re into slots that are both fun and have the potential for big payouts, give this one a try!

  • Cyrille Berne commented
    19 May 17:05

    It would be better if the image element and the asset panel were both revisited, enabling the use of currentColor and other SVG attributes (preserveAspectRatio, stroke-width), and allowing to edit SVG code and replace an image via the asset panel.

  • Lennart Hennig commented
    23 Apr 20:32

    Seriously, another huge potential and the webflow team is sleeping and ignoring the whole wishlist. Guys its a question of time till your competitors are eating your lunch if you don't start shipping features your customers are asking for since half a decade. Embarrassing.

  • Joel Martin commented
    05 Feb 20:25

    Webflow, how is it possible that you have not shipped this even though it has been on the wishlist for 5 years?! This would be such a simple and useful element!! I want to use dynamic icons in the CMS and there is no way to do this smoothly so that the SVG will inherit the current-color.

    So frustrating how unresponsive Webflow's wishlist has become. What's the point of even having it?

  • Raja digital Edc commented
    September 28, 2023 02:12

    blue, and yellow, while the highest paying symbols are fully themed and include cups, rings, immortals, and crowns. One of the first things you Rajaslot notice when


  • Kambojaedc Digi commented
    September 28, 2023 01:08

    explained below, which makes playing with it even more fun. The Sweet Bonanza feature includes free spins, so players can get some spins slot kamboja


  • Pde Admin commented
    April 25, 2023 18:44

    This is table stakes for any modern business site. I look forward to this being done soon.

  • Connor Hansen commented
    November 30, 2022 19:49

    2022 and this is still not available??? Webflow?????????

  • Esben Engsted commented
    September 15, 2022 08:57

    This would be great, have had the above problems stated with SVG's recently.
    Getting the currentColor feature to work would be a nice little fix at least.

  • Dark Hawk commented
    July 18, 2022 06:54

    Thank you. I will try your methods to increase my knowledge.

  • Guest commented
    June 16, 2022 13:59

    เทคนิคเล่น Pg ดูได้ที่ Pantip แต่ไม่ใช่แค่ที่ pantip เท่านั้น google ยังมีสูตรการเล่นมากมายที่ช่วยทำให้คุณสนุกกับการเล่น pgslot ของเรามากยิ่งขึ้นกับเว็บของเราที่กำลังมาแรงสุดๆจนหยุดไม่อยู่ในตอนนี้

  • Cookies & MILK commented
    May 18, 2022 13:11

    Another example of WF droping the ball on simple features.

  • INAGREAT commented
    April 07, 2022 22:39

    I really can't believe this still isn't done! What the HELL Webflow. This comment was created all the way back in 2018 and it's now 2022. This is one of the most fundamental features that should have been available from the beginning. All websites need SVGs at some point for many elements like custom icons and buttons... There are other web builders that provide this and Webflow still doesn't. It's Unbelievable how you guys completely ignore this community of paying customers! 🤬

  • Guest commented
    February 21, 2022 04:59

    Thank you for sharing your valuable solution, it's work properly.


    https://www.myloweslife.mobi/

  • Thanh Miller commented
    February 10, 2022 06:44

    Thanks for the update. I'll be sure to keep an eye on this thread.

    indigocard

  • Guest commented
    February 07, 2022 09:12

    Thank you for sharing your valuable solution, it's work properly.

  • Ladarius Lang commented
    February 01, 2022 06:28

    Did you have a fix on this issue? MyGiftCardSite Challenging a relative issue yet no response from anyone and couldn't see this point taking a gander at in google.

  • Jacob Williams commented
    January 08, 2022 21:35

    This would be amazing. WE NEED THIS!

  • Nils commented
    January 02, 2022 22:08

    PLEASE!

  • Winona Homenick commented
    November 25, 2021 07:49

    Embed an SVG via an <img> element, you just need to reference it in the src attribute as you'd expect. You will need a height or a width attribute

  • Load older comments
  • +1180