ベクターグラフィックスの仕様、ブラウザ表示の仕組み、メールクライアントの互換性、高精細ラスター変換の手法を解説します。 CrushSVG.
Scalable Vector Graphics (SVG) is an XML-based image format for two-dimensional graphics. Unlike raster image formats (such as JPEG or PNG) that store information in a grid of colored pixels, SVGs store image data as mathematical formulas. This means SVGs can be scaled up or down infinitely without losing quality or becoming pixelated.
Vector editors like Illustrator or Figma often export SVGs with a lot of unnecessary metadata, hidden layers, and empty groups. To reduce file size:
<defs>.There are multiple ways to include SVGs in your web projects:
<svg> markup directly into HTML. Best for CSS styling, color switching, and interactive animations.<img src="icon.svg">. Great for caching and clean markup, but prevents internal SVG styling.background-image: url('icon.svg'). Ideal for decorative elements and repeating vector patterns.<title> and <desc> for accessibility and screen reader support.Check if the viewBox matches the bounding coordinates of all internal paths, and ensure no overflow clip-paths are active.
Convert all text nodes to outlines/vectors before exporting, or embed web fonts directly using base64 data URIs in the SVG <style> block.
Ensure gradient IDs inside <defs> are unique and correctly referenced via url(#id).
Email clients are notoriously bad at rendering modern web technologies. Most major clients — including Outlook (all desktop versions), Gmail, and Yahoo Mail — completely strip or block inline and linked SVG images for security and compatibility reasons.
Figma makes it easy to design icons and UI components, but sometimes exporting directly to PNG loses fine vector details or custom scaling options:
If you've sent an HTML newsletter containing an SVG and wondered why customers saw broken image icons, here is the technical explanation:
<script> tags or inline event handlers, email service providers block them by default to protect users against cross-site scripting attacks.これらのベストプラクティスを活かして、無料の高解像度コンバーターで綺麗なPNGを出力しましょう。