I've been learning how to do more with SVGs for a while now and all of a sudden your vid pops up! Keep it up bro your work is the more clear and concise Webflow teachings on RUclips IMO.
Sooooo cool!!! So basically, with this dom-element we can build whatever html-structure we like and make it accessible/native with the attributes! NICE!
Fantastic.Thanks so much for your incredible way of sharing your Webflow knowledge. So fresh and straight forward. I have a playlist of your last 4 videos and run them a few times a day, cause they contain so much value and information thats almost impossible to absorb all at one go. AAH and of course I play the videos at 0.75 playback speed.YEYE
Couldn't find a video for it - but using your "Custom SVGs from CMS Field" cloneable... you could create a button component that allows you to embed icon using text fields. Allowing people to use currentColor and be able to update svg icons in a button component.
Another fantastic explanation, compliments Mister T! Is it also possible to link the SVG to an unsorted list with a style script: list-style-image: url('svg-link')? So that the color of SVG can be linked to, for example, a CMS color choice or variable color?
Tim, is it possible to take multiple DOMs (of text, images, SVGs, etc.) and nest them in an SVG DOM, so that the entire block becomes a legitimate SVG file? If so, would it also be possible through Webflow/Wized/Xano to take that bundled SVG DOM element (or many of them) and export the SVG via a webhook -- eventually turning it into a JPG or PNG? As an example, pretend I made a RUclips Thumbnail image in a DOM using this method (with text, images, and other SVGs inside), and now I want to export it to Xano.
Embeds are a solid choice! Sometimes the svg can exceed the embed character limit though. Currently, we can’t link embeds to component fields. And we can’t animate each path inside the svg natively when it’s inside an embed.
Hey I've been trying to add glow to svg but everytime I do that black background appears even though the svg is transparent. Will using dom element solve the issue should I add background transparent in it to solve it? Or is there a different workaround. Actually the svg is going from white to green colour with glow the colour is changing fine but the glow isn't working. Please help.
This was really cool but I have not idea how you did most of that. How did you get SVG code? And I don't understand the dome part. Is that the same element that google page speed is always saying is to large? Could you do a more extensive video explaining in more detail how you did all that. Thanks.
Hi, we can open any svg file in a text editor or code editor to get the svg code. Figma also allows us to right click on an svg and copy its code. Without getting too technical, the DOM generally refers to the whole page and all the content inside it. We can add elements inside the DOM like an H2 or any element Webflow gives us access to. Recently with Webflow apps, they created the DOM element which can be any type of element we’d like. More details on the DOM element here… ruclips.net/video/qULN82RqAHw/видео.htmlsi=t2DrSKH2cyTE00ef
Hey timothy! Do you know why the paths/child dom elements are not resizing according no the parent? I can change the size of the parent but that's just resizing the box, the components/paths stay the same, getting clipped. Did I miss something from the video? Thx :)
i feel like there's so much untapped potential with attribute, but they confuse the heck out of me so I only use them when i'm following a tutorial. I believe you can access additional attributes by injecting code, correct? without code, is there a list of generic attributes that always apply? are the attributes you're using "unlocked" bc of the dom element? or is dependant on whether it's an svg or img etc? or both? lol
Good question! There's many standard attributes available in html. Like src is an attribute used to set the source of a video or image and href is an attribute used to set the url of a link For each element, W3 Schools has a list of all attributes that can be applied to that type of tag. www.w3schools.com/tags/tag_a.asp Webflow normally restricts us from applying some of those standard attributes like the style="your styles" attribute. But on the DOM element, we can apply all of the standard attributes, even ones that Webflow normally doesn't allow. On any Webflow element, we can also create custom attributes like . And we apply custom css or javascript to those attributes like you mentioned. All of the attributes I used in this tutorial though are part of the standard attributes that don't require extra code.
Damn! You are really killing it. Just finished experimenting with the other video you shared. Now seeing you can do the same for SVGs, what are the limit? 😅😅 Really appreciate you diving into this.
Hi Tim, one thing im stuck on is when you resize the svg to 11rem and it changes the size of the svg text, when I do this, it changes the size of the element but not the text inside, do you know what I might be missing? @@timothyricks
Hey Timothy, can you please confirm if this still works? I'm finding that the style property on the component no longer changes the colour of the svg - it only changes the button.
Hi, yes it’s all still working! The style attribute should be applied to the entire section so that everything inside changes. And the svg should have fill="currentColor" attribute with its font color set to the variable in the style panel.
Хобби
Doms should be the default element. Change my mind
100%
change my mind 😭
This is INSANE! Thank you so much for sharing this!
I've been learning how to do more with SVGs for a while now and all of a sudden your vid pops up! Keep it up bro your work is the more clear and concise Webflow teachings on RUclips IMO.
Thank you so much!!
FINALLLYYY, this DOM element has been needed for years. Great content as always
Totally agree! Thank you!
You're a wizard!! Learning a lot from you! Good on you 👍
Sooooo cool!!! So basically, with this dom-element we can build whatever html-structure we like and make it accessible/native with the attributes! NICE!
Thanks Tim. Very useful 👏
Finally! This is so useful. Thank you for explaining :)
I am a French freelancer using webflow since last year, i've learnt a lot wathing your videos, thank you so much !
I’m so glad these help! Great luck with your Webflow freelance!
Keep dropping them bombs Tim!
Thank you, Frank! Will do
Fantastic.Thanks so much for your incredible way of sharing your Webflow knowledge. So fresh and straight forward. I have a playlist of your last 4 videos and run them a few times a day, cause they contain so much value and information thats almost impossible to absorb all at one go. AAH and of course I play the videos at 0.75 playback speed.YEYE
Thanks so much for the feedback and encouragement!!
Indeed, the vids are packed with value!!!
Couldn't find a video for it - but using your "Custom SVGs from CMS Field" cloneable... you could create a button component that allows you to embed icon using text fields. Allowing people to use currentColor and be able to update svg icons in a button component.
This is amazing!
Man, you are the best!❤
yes yes yes yes yes that is excellent sir ! thank you
Great video.
Amazing!
WHAT. Legit thought I was dreaming looking at this . . .
Awesome tutorial bro!
Thank you!
Amazing.
This absolutely opens doors... all I need to do is learn to correctly walk through them... 😉
Opportunity for those plugin builders. Turn svg into this dom structure, ready to paste 🙏
For sure! That will be awesome
DOMs be dominating!
Amazing. Thank you so much 😊
Sure thing! Glad this helps! 🙂
Incredible! It's kind of hilarious that you need to install an app and extract the DOM element in order to use it.
Right? I hope it gets moved to the Add Panel
Woah. Woah. Woah.
Another fantastic explanation, compliments Mister T!
Is it also possible to link the SVG to an unsorted list with a style script: list-style-image: url('svg-link')? So that the color of SVG can be linked to, for example, a CMS color choice or variable color?
could you please make a video about the new localization feature? 🙏
Tim, is it possible to take multiple DOMs (of text, images, SVGs, etc.) and nest them in an SVG DOM, so that the entire block becomes a legitimate SVG file?
If so, would it also be possible through Webflow/Wized/Xano to take that bundled SVG DOM element (or many of them) and export the SVG via a webhook -- eventually turning it into a JPG or PNG?
As an example, pretend I made a RUclips Thumbnail image in a DOM using this method (with text, images, and other SVGs inside), and now I want to export it to Xano.
Nice tutorial. How can I tie the color to gradient instead of the current type color?
Very excited for this! Why add the Unsplash image first - is that the only way to get the DOM element?
Yes, currently we can only get it from a Webflow app or by copying it from a project that already has it
@@timothyricks Ah gotcha, thanks!
@@RedPantherio Today we can add a Custom Element
Wow this is really cool. But I feel exhausted thinking about some of my more complex svgs. Lol. I still wish it would do this for you automatically.
My man, doing God's work. ♥
Can you make a tutorial on how to do a vertical scroll within horizontal scroll within vertical scroll in Webflow, please?
This way we can also unlock native Canvas element
Wahooo - no more clunky embeds
thanks for sharing! interesting use of the DOM element, but seems rather complicated for real world use… why not simply use an embed?
Embeds are a solid choice! Sometimes the svg can exceed the embed character limit though. Currently, we can’t link embeds to component fields. And we can’t animate each path inside the svg natively when it’s inside an embed.
Hi Tomithy, nice content! 🙂
Could you try something out where you are animating these SVG's?
Thanks!
Great idea!
Hey I've been trying to add glow to svg but everytime I do that black background appears even though the svg is transparent. Will using dom element solve the issue should I add background transparent in it to solve it? Or is there a different workaround. Actually the svg is going from white to green colour with glow the colour is changing fine but the glow isn't working. Please help.
This was really cool but I have not idea how you did most of that. How did you get SVG code? And I don't understand the dome part. Is that the same element that google page speed is always saying is to large? Could you do a more extensive video explaining in more detail how you did all that. Thanks.
Hi, we can open any svg file in a text editor or code editor to get the svg code. Figma also allows us to right click on an svg and copy its code.
Without getting too technical, the DOM generally refers to the whole page and all the content inside it. We can add elements inside the DOM like an H2 or any element Webflow gives us access to. Recently with Webflow apps, they created the DOM element which can be any type of element we’d like. More details on the DOM element here…
ruclips.net/video/qULN82RqAHw/видео.htmlsi=t2DrSKH2cyTE00ef
Hey timothy! Do you know why the paths/child dom elements are not resizing according no the parent? I can change the size of the parent but that's just resizing the box, the components/paths stay the same, getting clipped. Did I miss something from the video? Thx :)
I've been running into the same issue! Have you found any fix?
i feel like there's so much untapped potential with attribute, but they confuse the heck out of me so I only use them when i'm following a tutorial.
I believe you can access additional attributes by injecting code, correct?
without code, is there a list of generic attributes that always apply?
are the attributes you're using "unlocked" bc of the dom element? or is dependant on whether it's an svg or img etc? or both? lol
Good question! There's many standard attributes available in html. Like src is an attribute used to set the source of a video or image and href is an attribute used to set the url of a link For each element, W3 Schools has a list of all attributes that can be applied to that type of tag.
www.w3schools.com/tags/tag_a.asp
Webflow normally restricts us from applying some of those standard attributes like the style="your styles" attribute. But on the DOM element, we can apply all of the standard attributes, even ones that Webflow normally doesn't allow.
On any Webflow element, we can also create custom attributes like . And we apply custom css or javascript to those attributes like you mentioned.
All of the attributes I used in this tutorial though are part of the standard attributes that don't require extra code.
Fucking amazing! Webflow accidentally released SVG's through there apps, insane.
Quick, someone create a Webflow App to automate this!!
That would be an awesome app!
There's already one called 'Simple Icons'. They have a lot of famous SVG logos, and you can modify everything inside the DOM.
Damn! You are really killing it. Just finished experimenting with the other video you shared.
Now seeing you can do the same for SVGs, what are the limit? 😅😅
Really appreciate you diving into this.
Thank you!! I'm still trying to find that limit myself. It's unbelievable what we can do with the DOM element.
Hi Tim, one thing im stuck on is when you resize the svg to 11rem and it changes the size of the svg text, when I do this, it changes the size of the element but not the text inside, do you know what I might be missing? @@timothyricks
Hey Timothy, can you please confirm if this still works? I'm finding that the style property on the component no longer changes the colour of the svg - it only changes the button.
Hi, yes it’s all still working! The style attribute should be applied to the entire section so that everything inside changes. And the svg should have fill="currentColor" attribute with its font color set to the variable in the style panel.
I think webflow should make you head of the new dom element
😂 I’ll take it
Can this be used to type on svg paths natively?
Oh, great idea! I believe so. We could create a DOM element with the textPath tag and link it to a collection item or component field.
@@timothyricks I will try and reply with my results. Thanks!
Man I love me some chilis
Haha, same! Those cheese fries are where it's at
cant believe that is this complex to paste an svg element
There’s a Webflow app now that makes this automatic
webflow.com/apps/detail/svg-import
You forced weblow to marry Adobe illustrator 🤣