Filepetal如何转换SVG为WebP
选择单个SVG文件、拖入文件，或粘贴自包含SVG代码。设置输出像素宽度，高度跟随源比例。选择透明或白色背景、20至100的质量值。转换后检查实际下载文件的预览、尺寸与字节数。修改设置会清除旧结果，避免预览继续代表旧参数。
相同尺寸，颜色压缩有别
2026年11月1日，同一个320×200透明徽章SVG在相同尺寸下编码三次。质量30为3,392字节，质量80为4,162字节，均含VP8图像及alpha块。与PNG渲染参考相比，可见区域RGB变化像素分别为35,187和34,297；任意颜色通道不同即计为变化，并非人眼质量评分，完全透明像素不计入颜色比较。两份输出的alpha都与参考逐像素相同，说明本实验中颜色压缩与透明度应分别检查。
质量100实际发生了什么？
本次Edge在质量100时生成12,230字节、包含VP8L无损图像数据的文件；其可见RGB和alpha与PNG参考完全相同。这是实际文件观察，不能只凭滑块标签推定编码。本页使用浏览器编码，没有独立无损开关；不同浏览器的字节、编码与体积不作保证。即使该栅格结果匹配参考，仍是固定像素图，不保留可编辑矢量路径。
先确定宽度，再判断文件大小
质量80时，徽章宽度320变为640，高度200变为400，输出从4,162变为7,738字节。宽高都加倍使像素数成为四倍，本样本文件字节并非四倍。质量管压缩，宽度管渲染像素数。另一个64×64圆形SVG仅116字节，WebP为1,000字节，转换不能保证所有矢量文件都变小。请保留源文件，按实际显示尺寸比较；这些合成控制样本不代表所有标志、显示器或CMS。
透明背景不等于移除背景
透明徽章含完全透明、半透明和不透明像素。透明选项保留这些区域，白色选项先合成白底。将白色填充结果与另一个已绘制白底的SVG比较，质量80下都为2,108字节且SHA-256一致。对已绘制白底的源选择透明不会删除矩形。平移viewBox控制也在320×200输出中保持圆形居中，检查源坐标渲染，而非裁切指令。
浏览器能显示，为什么本页仍拒绝？
2026年11月2日，三个原创SVG在192×96尺寸下绘制相同矩形、圆和三角形，分别用呈现属性、行内style、style元素与类设置填充色。在本工具之外，浏览器将三者渲染成字节完全相同的PNG参考。在本工具内，251字节的呈现属性源在质量80时生成真实1,508字节WebP；269字节行内style及299字节style元素控制在编码前被拒绝，没有输出文件。这是原校验器边界，不是新增CSS转换功能；通用不支持内容提示不证明SVG无效或所有CSS有害，SVG标准本身支持CSS。
若你能控制原稿，可导出单独SVG副本，用呈现属性保存简单fill和stroke，再检查外观。Adobe文档区分内部CSS、行内style和呈现属性；选项位置随导出器而异。不要仅删除样式，否则可能丢失颜色。本页不改写CSS，也不自动操作Illustrator；更换一个设置不能解决其他不支持内容，脚本、动画、嵌入图像及外部资源仍受限制。这些样本为手工原创，非Illustrator实际导出，未测试竞品或实体手机。桌面、390英文、320中文各拒绝两个CSS控制、清除旧下载并恢复支持源的实际下载。
| 样本/日期 | 输入与浏览器参考 | 本工具结果 | SHA-256 |
|---|---|---|---|
| markup-attributes 2026-11-02 192 × 96 px | markup-attributes.svg (251 bytes) PNG (2668 bytes) | WebP (1508 bytes) 192 × 96 px | 827947053bdbfad5ae670203e861487d9cfaa1f0628dc9cdc06c567055370872ebcfb6c2a22ec4c6b632ec3d77ff22e1144c8798b2cfa3bcb1d00b78305dcfb5cffc5d06b0fdea7aef91a23fc34d5af504dacf9645dd41ba1f6061745ada2c34 |
| markup-inline 2026-11-02 192 × 96 px | markup-inline.svg (269 bytes) PNG (2668 bytes) | 拒绝，未生成输出 | c4cd0d0a57dfa78972e41a2420e17e61aedb101573ee6f401e98359a3b1ae415ebcfb6c2a22ec4c6b632ec3d77ff22e1144c8798b2cfa3bcb1d00b78305dcfb5 |
| markup-css 2026-11-02 192 × 96 px | markup-css.svg (299 bytes) PNG (2668 bytes) | 拒绝，未生成输出 | 3f9abb690a29413688d7a224c1f431be6a46954c57dbda78941306184b6b4770ebcfb6c2a22ec4c6b632ec3d77ff22e1144c8798b2cfa3bcb1d00b78305dcfb5 |
文字先变了，还是压缩后变了？
2026年11月4日，三个原创文字SVG在同一Edge字体环境中绘制LOGO 2026，画布320×100、字号40、WebP质量80。虚构字体名加monospace回退，与显式monospace的PNG参考完全相同，WebP也字节一致，均为3,034字节。改为serif的PNG参考在WebP编码前已有3,089个RGBA像素不同，其WebP为2,916字节。计数来自相同画布上任一RGBA通道不同的像素，不是人眼评分。此配对把字形选择与后续压缩分开；不能把用户文件中的所有字形变化都归因于本例。
调整WebP质量不会让本工具取得缺失的原始字体。先检查转换前的字形，再决定压缩设置。另两份控制仅用原创手绘FP路径，分别在根元素写monospace和serif；其PNG参考一致、WebP一致，均1,134字节。路径描述几何形状，根字体属性在这组无text元素的文件中没有改变结果。这些路径并非从上述文字自动生成，不证明本页会转轮廓；本页不自动嵌入字体或修改字形。保留原稿，在创作工具中准备想要的形状，并重新检查导出副本。这里只验证一台桌面浏览器，不保证其他系统的泛型字体或相同字节。
| 输入 / 日期 | 浏览器PNG参考 | WebP · 320 × 100 | SHA-256 |
|---|---|---|---|
| font-fallback.svg 2026-11-04 · 214 bytes 320 × 100 px | PNG · 5672 bytes | WebP · 3034 bytes | 9bfcec7dc7b79cd3c22f1fa6c2602117c8ef1c2f0559afbb7788a3c8225273a7 068d3febcfed1b1edb3bd81646161bac8d2e4d1975c5c49af9e20f33a90711e2 7e418c63aacb4bfee7ab127c21f77de68943817c70bd2ac4b6567666e271e95f |
| font-monospace.svg 2026-11-04 · 183 bytes 320 × 100 px | PNG · 5672 bytes | WebP · 3034 bytes | f04e148795138d154e53a094c6c79088412d88ceab5f5f9e9a5416a730b3d20f 068d3febcfed1b1edb3bd81646161bac8d2e4d1975c5c49af9e20f33a90711e2 7e418c63aacb4bfee7ab127c21f77de68943817c70bd2ac4b6567666e271e95f |
| font-serif.svg 2026-11-04 · 179 bytes 320 × 100 px | PNG · 5696 bytes | WebP · 2916 bytes | 85d914bf65f35fea329027b06104110fb4c27cd9201235af4085a622b2f12162 151a3156e502590e41332423a372c2b6ddb3bb09b9506dcb45e5edcfafadda89 97c95e84097aa6a0ecd4da98a2524fe07cc3bcc64a1630dc9bc1d5120fc6d73d |
| font-path-monospace.svg 2026-11-04 · 294 bytes 320 × 100 px | PNG · 1867 bytes | WebP · 1134 bytes | 09a82bb291840c8c781a8d2f78de51f6104a69b55aad5f1c7e0f9358ec4ebba0 1362bbfd7e9a5e6d079e23db4fd56eee0038dda229602597e2eba17c4ecbcd40 40d69f6d4242c374847d2a068bbd45fc8064603f0e7dd5653f361a9c1efc3b47 |
| font-path-serif.svg 2026-11-04 · 290 bytes 320 × 100 px | PNG · 1867 bytes | WebP · 1134 bytes | bf67d381c44bd069ce4bcc6a299022397631e0f7a26eb9a8e7965a0daee83e36 1362bbfd7e9a5e6d079e23db4fd56eee0038dda229602597e2eba17c4ecbcd40 40d69f6d4242c374847d2a068bbd45fc8064603f0e7dd5653f361a9c1efc3b47 |
支持内容与限制
单个SVG不超过2,097,152字节。沿用现有SVG校验器，支持有限尺寸或viewBox的形状、路径、文本、渐变和局部绘制引用。源与输出每边不超过4096像素、总计不超过1600万像素。拒绝脚本、动画、外部资源、嵌入图像、链接、use、foreignObject及style块/属性。文本依赖本机字体，轮廓文字更可控。不输出SVGZ、批量包或动态WebP。浏览器回退PNG时会报错，不会将PNG改名WebP；检查MIME和RIFF/WEBP签名。19个拒绝与回退控制不是完整安全审计。
可下载复现实验
4个原始SVG、8个真实WebP和3份PNG参考。每行记录日期、源/目标尺寸、参数、字节与哈希。PNG仅作同尺寸渲染参考，不是SVG本身的像素真值；变化计数只在相同尺寸的解码图像间计算。
| 样本/日期 | 输入/输出尺寸 | 文件与字节 | SHA-256 |
|---|---|---|---|
| badge-q30 2026-11-01 30 · transparent · VP8 | 320 × 200 → 320 × 200 px | alpha-badge.svg (492) badge-q30.webp (3392) | d1d2c09c92f741d38e2ba56519ac9afef5ed7396020e4d94ae72f53cd28b2e9b f89c16b26e3b4f284265dc89843cce240a9d7813347f2c085deafdab5c82ebc1 |
| badge-q80 2026-11-01 80 · transparent · VP8 | 320 × 200 → 320 × 200 px | alpha-badge.svg (492) badge-q80.webp (4162) | d1d2c09c92f741d38e2ba56519ac9afef5ed7396020e4d94ae72f53cd28b2e9b 5a67314ffb8969ee79fb137bfb23a82fd722e94f2b6f66099a06c1b35ba9b7cd |
| badge-q100 2026-11-01 100 · transparent · VP8L | 320 × 200 → 320 × 200 px | alpha-badge.svg (492) badge-q100.webp (12230) | d1d2c09c92f741d38e2ba56519ac9afef5ed7396020e4d94ae72f53cd28b2e9b ae94988d8a4b56d42c6a8bbce070fcf77f91e4e6dcf340e99d4fa901828a73a7 |
| badge-640-q80 2026-11-01 80 · transparent · VP8 | 320 × 200 → 640 × 400 px | alpha-badge.svg (492) badge-640-q80.webp (7738) | d1d2c09c92f741d38e2ba56519ac9afef5ed7396020e4d94ae72f53cd28b2e9b fa7cefbe6c9b1bf47edebfa234a5fd38d2bd59a918445297e834ba9aec2bd605 |
| badge-white-q80 2026-11-01 80 · white · VP8 | 320 × 200 → 320 × 200 px | alpha-badge.svg (492) badge-white-q80.webp (2108) | d1d2c09c92f741d38e2ba56519ac9afef5ed7396020e4d94ae72f53cd28b2e9b 8e7cd5130ab0d944ddf34ab5680acde58bcd9d4354a15711b058ba3016a1761d |
| drawn-white-q80 2026-11-01 80 · transparent · VP8 | 320 × 200 → 320 × 200 px | drawn-white.svg (537) drawn-white-q80.webp (2108) | 021110c55f4da819721ab305caaa5805b63003790d5dbbd5263f27e1c52833f8 8e7cd5130ab0d944ddf34ab5680acde58bcd9d4354a15711b058ba3016a1761d |
| tiny-q80 2026-11-01 80 · transparent · VP8 | 64 × 64 → 64 × 64 px | tiny-mark.svg (116) tiny-q80.webp (1000) | a09b0109f4af0f7615b8c67f5d5d54d3c19cc9ebe179356c0a4e26d24680801d d6a4f482f7263c11d33f9da90aa76b85551f3090f16e08ee314cda3b1af2a187 |
| shifted-q80 2026-11-01 80 · transparent · VP8 | 320 × 200 → 320 × 200 px | shifted-box.svg (142) shifted-q80.webp (2246) | f175ec601e7108b1c03e7272092f337ee575064d70454e6822757d4032f8a070 0038604188a8ecb606e1055a7b69e9aa17cd237af70aec96574217d01e4360be |
- badge-640-reference.png: 640 × 400 px, 155145 bytes.
1272f1b0d237f8611072cd00b4463efc712d7b319b734b8941d311f8df21bebe - badge-reference.png: 320 × 200 px, 43291 bytes.
c925dc4c6bf93ebd1713c61d32a58130d29d7c55a02f457e49228811ff63534c - badge-white-reference.png: 320 × 200 px, 37770 bytes.
cc0a48b7beba1d8f2aae3428c56bb7558434ea3eeea6b2fd4034c446f93acfec
常见问题
为什么字母形状变了，不只是变模糊？
字体选择发生在光栅化时。本次等宽与衬线控制的PNG参考在WebP编码前已不同。先检查SVG中的文字与可用字体；不能仅凭图像不同就断定是压缩。
本页会把文字自动转为轮廓吗？
不会。本次FP是预先手绘的路径控制，转换器没有从文字生成它，也不提供字体嵌入。请保留原稿，在创作工具中准备副本后检查外观。
有效SVG也会被拒绝吗？
会。SVG标准允许CSS，但本页校验器拒绝style属性和style元素。三个相同外观控制中，仅呈现属性版本生成WebP。预览能显示不等于转换器接受全部标记。
要重新导出什么，而不是只改质量？
为简单颜色与描边尝试呈现属性，保留原稿，并检查导出副本。不要直接删样式。本页不自动改写CSS；脚本、动画、嵌图和外链仍会被拒绝。
WebP能在任意尺寸保持清晰吗？
不能。请按目标像素尺寸渲染SVG，压缩质量不能恢复矢量缩放能力。保留原SVG供重新导出。
质量100意味着无损吗？
本次Edge输出为VP8L，可见像素与参考相同。本页向浏览器请求质量值，并无独立跨浏览器无损开关。请检查编码记录，不假设别的浏览器相同。
为什么WebP比SVG更大？
紧凑矢量指令可描述整个形状。本次小圆控制从116字节SVG变为1,000字节WebP。不保证固定压缩百分比。
为什么背景仍是白色？
透明保留源的透明区域，不会删除已绘制白色形状。本次白底控制与白色填充输出相同。
文件会上传或变为动画吗？
源文件不上传，结果是单张静态WebP。脚本与SVG动画会被拒绝，不会被宣称导出动态结果。
来源与范围
实验使用合成控制图，未测试竞品转换、实体手机或目标CMS。浏览器、Canvas编码器与字体可能影响结果。