SVGPulse Studio Help & Documentation

1. Real-Time Vector Customizer Controls

Click any icon card in the workspace to launch the Live Popup Customizer Studio. Every adjustment updates the underlying SVG vector geometry non-destructively:

• Color & Fill Modes: Switch seamlessly between Solid hex colors, two-stop angled Linear Gradients, and layered Duotone fills with adjustable secondary opacity (10%–60%).
• Stroke Thickness & Geometry: Fine-tune stroke width from ultra-thin 0.75px to bold 3.5px, scale dimensions from 16px to 512px, rotate in 45°/90° increments, flip horizontally/vertically, and switch between Round, Square, and Sharp stroke linecaps.
• App Badges & 3D Shadows: Wrap any vector inside a Circle, Rounded Squircle, or Square badge container with custom solid or gradient fills and an optional vector shadow.

2. Figma, Sketch, React & Web Builder Workflows

• Figma & Sketch Direct Paste: Click ✦ Figma Paste in the studio modal and press Ctrl+V (or Cmd+V) directly inside Figma, Sketch, Framer, or Illustrator to paste editable vector paths.
• React / Next.js JSX Export: Click ⚛️ Copy JSX to copy a ready-to-use JSX element with camelCased SVG attributes (strokeWidth, strokeLinecap, strokeLinejoin).
• Dynamic CSS currentColor Mode: Enable Dynamic currentColor Mode in Advanced Studio so the exported SVG inherits text and hover colors automatically in Tailwind CSS, Webflow, WordPress/Elementor, and standard CSS.
• High-Res PNG & CSS Data URI: Export transparent raster PNGs at 64px, 256px, 512px, or 1024px, or copy an encoded data:image/svg+xml URI for CSS pseudo-elements.

3. Bulk ZIP Packs & Custom SVG Uploads

Click the + button on icon cards to build a project collection in the Bulk ZIP Pack drawer, then download all selected icons together as a single .zip archive containing individual .svg files and a ready-to-use CSS stylesheet. You can also click Upload SVG in the top toolbar to import and customize your own vector files.