単純なものならあまり変わらないような気がしたので実際に比較してみます。100%)という縦方向に半透明の赤から半透明の青に変化するものです。CSSグラデーションでは、各ベンダー拡張プリフィックスを並べることになります。100%);改行を含めて475バイトになりました。URIスキーム化することになります。URIスキーム化してCSSにすると以下のようになります。data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjAiPgogIDxkZWZzPgogICAgPGxpbmVhckdyYWRpZW50IHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxMDAlIiBpZD0iZ3JhZGllbnQiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjogcmdiKDI1NSwgMCwgMCk7IHN0b3Atb3BhY2l0eTogMC41OyIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOiByZ2IoMCwgMCwgMjU1KTsgc3RvcC1vcGFjaXR5OiAwLjU7Ii8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICA8cmVjdCB4PSIwIiB5PSIwIiBmaWxsPSJ1cmwoI2dyYWRpZW50KSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPgo8L3N2Zz4K最後の改行を含めると595バイトで、CSSグラデーションとの差は100バイト強に収まっています。元のSVGからXML宣言を削除したり、idを短くしたりとかすれば更に小さくすることもできるはずです。複雑なグラデーションになるとこのような微差に収まることはまず無くなると思いますが、今のところはこういった単純なグラデーションを使うことが多いので、SVGグラデーションでもサイズ的なデメリットは殆ど無いと言っても良さそうです。(表示)で公開しています。視覚的なデザインについてはスタイル・ガイドを、生成の仕組みについてはGitHubのリポジトリーを参照してください。お問い合わせはメールや、Twitter、GitHubのイシューでお願いします。