SVG Studio
Edit SVG code with a live preview. Format, optimize, inspect dimensions and element counts, copy SVG source or as a data URI, and download the file.
What is SVG Studio?
SVG Studio is a client-side SVG code editor with a live preview. Paste or write SVG markup in the editor and see the rendered graphic update instantly. Use the Format button to pretty-print your SVG with consistent indentation, or Optimize to strip comments and remove empty group elements. Copy the SVG source, copy it as a Base64 data URI for embedding in CSS or HTML, or download the file directly.
SVG basics
SVG (Scalable Vector Graphics) is an XML-based format for two-dimensional graphics. Unlike raster formats (PNG, JPEG), SVG scales without quality loss at any resolution - making it ideal for icons, logos, and illustrations. The root <svg> element defines a viewport via width, height, and viewBox attributes. Common child elements include <circle>, <rect>, <path>, <text>, <g> (group), <defs>, and <use>.
Frequently Asked Questions
What does viewBox do in SVG?
The viewBox attribute defines the internal coordinate system of the SVG. Its four values are min-x min-y width height. Combined with the outer width/height, the browser scales the contents to fit. For example, viewBox="0 0 24 24" with width="48" doubles the visual size while keeping coordinates at the 24-unit scale. Omitting width/height and using only viewBox makes the SVG fluid - it fills its container.
How do I embed an SVG in HTML or CSS?
Three main approaches: (1) Inline - paste the SVG directly into your HTML; it can be styled with CSS and accessed via JavaScript. (2) <img src="image.svg"> - simple but isolated from the page's CSS. (3) Data URI in CSS - background-image: url("data:image/svg+xml;base64,...") - useful for small icons. The "Copy Data URI" button in SVG Studio generates the Base64-encoded version ready to paste.
How do I use SVG icons in Laravel Blade?
Blade components work perfectly for reusable SVG icons. Create resources/views/components/icon/chevron.blade.php containing the SVG markup, then use <x-icon.chevron class="w-5 h-5 text-gray-400" /> anywhere. Pass $attributes to the root SVG element so callers can add classes and event handlers. Alternatively, use the blade-ui-kit/blade-heroicons package for the full Heroicons set.
What is the difference between SVG stroke and fill?
fill colours the interior of a shape; stroke colours its outline. Use stroke-width to set outline thickness and stroke-linecap (round, square, butt) to control line endings. Set fill="none" for outline-only icons (common in Heroicons and Feather Icons). Both accept CSS colour values, currentColor (inherits from CSS color), or url(#gradient-id) for gradient fills.