Draw an SVG with Fill in Adobe Muse. No Coding Skills Required.
In the video tutorial above I go over how to draw an SVG in Adobe Muse with the SVG Draw Widget found at http://museforyoushop.com. I recently released an update where you can now draw the SVG and have the fill fade in. The steps are as follows.
1. Drag and drop the “SVG Draw – Add First” widget from the library panel and place it at the top of your Adobe Muse website. If you do not see the library panel go to Window > Library.
2. Drag and drop the “SVG Draw Widget” from the library panel.
3. Add an SVG image. The SVG image can be any size and have a fill.
4. Set the stroke color and stroke width within the widget options.
5. Select the “Add Fill After Draw” option to have the fill fade in after the SVG draws.
6. Select “Enable Fill Color” if you would like to set a solid color for the fill instead of the original fill of the SVG image. If this option is selected you can select a fill color for the SVG.
7. Choose from the following drawing methods:
- Delayed – Draws all the SVG paths at the same time with a delayed start.
- Async – Draws and finishes all the SVG paths at the same time.
- One by One – Draws the SVG paths one by one.
8. In the new update you have the option of redrawing the SVG:
- On Hover
- On Click
- On Window Resize
You can have the SVG redraw in all of these cases or different variations. For instance you can select on hover and on click.
9. If you would like the SVG to fade out after it draws enable the “Fade Out” option. This option works well if there is no fill.
10. Done.
For more video tutorials and widgets for Adobe Muse visit http://museforyoushop.com.
Happy Musing :).