Quick SVG

Stacks Image 114345

Version: 1.0.2 - RW8/Classic & Stacks
Browser: Chrome, Safari, Opera, Brave, Firefox, Edge.

Superpowers to your SVG!

Make line drawing animation easily.
25+ ready-to-use icons and custom SVG templates.

Enhance your SVG to create stunning animations.
You can customize everything according to your needs. Just look at the demos
 Drop Images Here 

Stacks Image 114925
Stacks Image 114929
Stacks Image 114945
Stacks Image 114937
Stacks Image 114941
Stacks Image 114935
Stacks Image 114927
Stacks Image 114933
Stacks Image 115141
Stacks Image 114939
Stacks Image 115151
Stacks Image 114951
Stacks Image 114943
Stacks Image 114947
Stacks Image 114949
Stacks Image 114953
Stacks Image 114931
Stacks Image 114955
Stacks Image 115143
Stacks Image 115147
Stacks Image 114957
Stacks Image 115149
Stacks Image 115145
Enter the name for this tabbed section:

STACK INFO

SVG Style

This stack allows you to use the path of any SVG to change its style and animate background & stroke.
Controls the style of the border and fill independently, you can assign a shadow to both.
To give superpowers to your SVG, just put the Vector PATH in the stack to change the style and animate the stroke.

Line Join: Miter Round Bevel
- Fill: disabled
- Border & FIll Shadow
- Link / Hover: Scale Slide Fade

Line Join: Miter Round Bevel
- Fill rule: NonZero Evenodd
- Border & FIll Shadow
- Link / Hover: Scale Slide Fade

- Line Join: Miter Round Bevel
- Fill rule: NonZero Evenodd
- Border & FIll Shadow
- Link / Hover: Scale Slide Fade

Key Features

Animated Stroke and Fill with Fade-in
Change animation speed and behavior
Customize Borders and Shadow
Set Max Width for tablet and phone.
Linear and gradient SVG Fill
Add link to stack with hover effects

Stroke Options

Stacks Image 114796

Responsive Options

       
Change setting on mobile
Width and Height
Borders shadow
SVG Padding
Enter the name for this tabbed section: GENERAL SETTING
EDIT MODE
 
Stacks Image 115162
Edit Mode Panel
- Background & Overlay
- SVG Style Fill & Stroke
- Show current Viewbox size
View Setting Editor Mode
 
Stacks Image 115172
Edit Mode Tools
- Hide/Show panel
- Hide/Show Image preview
Responsive setting
     
Stacks Image 115182
Multiple Heights
Sets width and height selectively.
Add Link
 
Stacks Image 115192
SVG Style
     
Animation setting.
- Static or play in view
- Custom style LINEAR, EASE IN / OUT
Stacks Image 115203
SVG Fill Path
    +     +  
Stacks Image 115209
SVG Icon & Custom Path
 
Stacks Image 115217
Background Setting
    +     +  
Add BG to the stack.
- Drag image from resources panel or disk
- Load image from URL
- Load built-in BG
Stacks Image 115228
Background with custom border and corners
Background Overlay
    +     +  
Stacks Image 115238
SVG Animation
     
Animation setting.
- Static or play in view
- Custom style LINEAR, EASE IN / OUT
Stacks Image 115248
  Duration: the value depends on the "animation timing" and increases based on the SVG complexity
Enter the name for this tabbed section: FAQ

FAQ

  This is a Drag and Drop SVG Stack?

No, to handle border, background styles and animations independently, you need to extract the PATH from the SVG. This also allows you to customize style and responsive behavior.
It's quite easy and you can use millions of SVGs available on the web.
Read info page.

  Can I use my own SVG?

It depends on how the SVG is structured; for example, SVG icons can be used immediately. If the SVG is complex or contains transformations, it may need to be modified to work properly in the stack.
To function properly, the SVG must contain a single "PATH", without "MATRIX" (X, Y transformations, and scale).

  Can I edit my SVG?

The SVG can be modified to work properly. Vector icons available on the web comply with these conditions in 90% of cases.

  How to edit SVG?

A detailed guide to edit and export your SVGs is available on Info page

  Smooth Animation


How to increase performances?


The performance varies significantly based on the PATH complexity and the animation speed.
Choose the best combination of stroke speed and SVG styles.

      You should try the animation in more than one browser and compare the animation even on old mobiles to find the perfect timing between old and modern devices.


  You can simplify animation on mobile devices: Hide "Stroke" and "Fill" shadows.
Stroke Shadow
Stacks Image 114782
FIll Shadow
Stacks Image 114785
included in the package
- Stack with 25 icons and custom SVG
- RW8 /RW Classic demo project
- Over 100 Demos and 100+ SVGs
- Blank SVG templates

QUICK SVG STACK
RW8/Classic & Stacks4/5

Changelog


Cart