svag is able to download 99% of svg files from web. It can work with almost every svg entry style in the code.
v1.1
19 Nov 2025
Inline SVG in button - direct path
<button>
<svg width="18" height="18" viewBox="0 0 18 18" fill=0000FF>
<path d="M9 2.25...2.25Z" fill="#FFD700"/>
</svg>
Star Button
</button>
SVG with <use> element in button - sprite reference
<button>
<svg width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
<use href="#bookmark-icon"></use>
</svg>
Bookmark
</button>
SVG with fill from CSS class
.icon-red { fill: red; }
<svg class="icon-red" width="18" height="18" viewBox="0 0 18 18">
<path d="M9 1.5C4.8...1.5Z"/>
</svg>
Path with CSS classes - fill and stroke from CSS
.c4 { fill: #ff6b35; }
.b20 { stroke: #2c3e50; }
<svg width="18" height="18" viewBox="0 0 18 18">
<path class="c4 b20" d="M2.25 9H15..." stroke-width="2" stroke-linecap="round"/>
</svg>
SVG with CSS variable (var(--color))
<button style="--color: #4CAF50;">
<svg width="18" height="18" viewBox="0 0 18 18" style="fill: var(--color);">
<path d="M3.75 9L..." stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Check
</button>
SVG inside select element
<svg width="18" height="18" viewBox="0 0 18 18" fill="#9333EA">
<rect x="3" y="3" width="12" height="12" rx="2"/>
</svg>
Nested SVG groups
<svg width="18" height="18" viewBox="0 0 18 18">
<g fill="#E91E63">
<g transform="translate(2, 2)">
<circle cx="7" cy="7" r="5"/>
<circle cx="7" cy="7" r="2" fill="white"/>
</g>
</g>
</svg>
Multiple paths with different fill values
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M12 2L15 9L22...12 2Z" fill="#FFD700"/>
<circle cx="12" cy="12" r="3" fill="#FF5722"/>
</svg>
SVG with xlink:href
<svg width="18" height="18" viewBox="0 0 18 18" fill="#2196F3">
<use xlink:href="#calendar-icon"></use>
</svg>
SVG with stroke only
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="#00BCD4" stroke-width="1.5">
<use href="#download-icon"></use>
</svg>
Combination of different shape elements
<svg width="24" height="24" viewBox="0 0 24 24" fill="#795548">
<rect x="4" y="4" width="7" height="7" rx="1"/>
<rect x="13" y="4" width="7" height="7" rx="1"/>
<rect x="4" y="13" width="7" height="7" rx="1"/>
<circle cx="16.5" cy="16.5" r="3.5"/>
</svg>
Ellipse and line elements
<svg width="24" height="24" viewBox="0 0 24 24">
<ellipse cx="12" cy="12" rx="8" ry="5" fill="#9C27B0"/>
<line x1="4" y1="12" x2="20" y2="12" stroke="#FFC107" stroke-width="2"/>
</svg>
Polygon and polyline elements
<svg width="24" height="24" viewBox="0 0 24 24">
<polygon points="12,2 22,22 2,22" fill="#FF9800"/>
<polyline points="4,18 12,8 20,18" fill="none" stroke="#F44336" stroke-width="2"/>
</svg>
SVG with data-dssvgid attribute
<svg class="icon" data-dssvgid="custom-search-icon" fill="#3F51B5" height="18" viewBox="0 0 18 18" width="18">
<use href="#search-icon"></use>
</svg>
Complex nested structure with multiple groups
<svg width="24" height="24" viewBox="0 0 24 24">
<g fill="#607D8B">
<g transform="translate(4, 4)">
<path d="M8 0L10 6L16 7L12 11L13 17L8 14L3 17L4 11L0 7L6 6L8 0Z"/>
</g>
</g>
</svg>
SVG without explicit fill
<button style="color: #E91E63;">
<svg width="18" height="18" viewBox="0 0 18 18">
<path d="M9 1.5C4.85...12.75Z"/>
</svg>
Inherit Color
</button>
SVG with pointer-events: none
<svg width="18" height="18" viewBox="0 0 18 18" style="pointer-events: none;" fill="#009688">
<path d="M9 2.25C5...7.28033Z"/>
</svg>
Mix - sprite use + CSS class + transform
<svg class="icon-blue" width="20" height="20" viewBox="0 0 18 18" transform="rotate(45)">
<use href="#download-icon"></use>
</svg>
Edge case - path with currentColor
<button style="color: #673AB7;">
<svg width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
<path d="M15.75 8.25...9.75V8.25Z"/>
</svg>
Plus currentColor
</button>
Mix - sprite use + CSS class + transform
<svg class="icon-blue" width="20" height="20" viewBox="0 0 18 18" transform="rotate(45)">
<use href="#download-icon"></use>
</svg>