Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

use image/svg+xml replace base64 #20

Open
shoyuf opened this issue May 25, 2020 · 2 comments
Open

use image/svg+xml replace base64 #20

shoyuf opened this issue May 25, 2020 · 2 comments

Comments

@shoyuf
Copy link
Member

shoyuf commented May 25, 2020

'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFIAAABSCAMAAADw8nOpAAAArlBMVEUAAAAAAAD///9paWkyMjL////////////29vb////09PTn5+fh4eGvr6/////6+vqZmZm8vLz39/fj4+P8/PyBgYH////////////////Gxsb////////////v7+/MzMzr6+v///+4uLj////o6OhNTU3Y2NjQ0ND9/f35+fn////////////t7e3////////////////z8/Pb29v////y8vLw8PDU1NT////////ym0LiAAAAOXRSTlMaAPooH+3z2LwFtYZ5QvXUNkvDgOAul49vV1RHGRKfWZThSPiMI2pf6szLva2ahHhPQa9wIamkYyJOAjtMAAAD1ElEQVRYw8WZ6XbaMBBGp/K+L4DBxUDZQkjInpB+7/9ipSapQPKGOT69PxNzbY3Go5FMP2rIxqPkPphrjGnz4D4ZjbO6X1QqJ2liQMJI0kk7pfW8YwD0eOrOvFBRVSX0Zu401gGw3bN1sXLyqAEsdiKSiJyYAdrj5CJlNvSBoDegEga9APCHWWOl9eQDZkSVRCbgP1nNlC8GYHtUi2cDxksDpTUEjJ/UiJ8GMLTqlO93YI5KDVEdhrv3auVYR39BF7DoQx9XKVMGW6GLUGywtFw5An7RxfwCRpKSG3vUgh53CsoUeKNWvAFpkXLM+DNe/pxsLCvfdR7HNvHU30WldQebill/Pph9ben3t/b0piwfbNxZgnKIfuHVA9dc4gS2dcLCXOpjeK58AVsUCacMEuyjSLpgeDlVWgacghGvdHDqpA4M60T5BEOVi8ItStE28vtu4IkrMx9y7XEZvvBN5+2nF0Yb94Pf5UGVHgF+9k85lGdb3eMIe/1cE8f79R2MrSLP+vBbOfEhVVwTR2wpaoqjISdeizUZ/uRL+QiTBKbIMaLCxPq6n6lKz/F4VFoaIjGOX78pS2z3mKuv4noEzcqVzwjEQLPjDFAps6PzRvhzgOdcuRPLhToXjTKb/K63ilg+dn+VE8YGYtLmo6ZKboqGPmBsclCmiIUp1QCIr7zMBw6I+RwjPSgT8V184NdWoeThscUBJgelIcy3suTDruQTB4SgRTB+UAa9KEge1dPHgRWdoSOjsRjKVz6eGtx80sVgjmmE6XkG6Tzhaljnl4bCazeiBO55EucRatYfmPLdXSR0jxmdssorQsOFUX4jZrinAJ4UyqZr5SIvckI1CmguBCPAAbfZ1HD07+cKMScNipwZm1plqIFzksYKNGI4r3r5UhBRLTOcMP/3WCpYsXJB9TjcuFzQibLlwPlaIoRegdZmeniDceTjNMaYFyfRiprg+bkxWAtJVJjqduO+EtBCIdWLX0hfbebcS3F3kZSUjU0zpbrFisSyUVLc9tTQuSCpuJWUYH9A7dCRlS0U+3bGCEbpcsa8VkoHSfmiG7dSxkgrWoPpRS7eGlQ1MG6b/c+uss1iFWsaH5fYZtU0g6XrxUzj/xKawbqW1Sx+mhX4dlNoWesba321lvvAIA8Lb5qExrq2/b/thee7vy2O2FTa/tdvUoLVzFMOdwkjvvvjcRY2KRdspZZ6g63UFRu+fc2Gr4NtaQeb5w62+B0cRHR0XHL9oU73R0/XH5B1c4zX/WEj5/f1R6LdH9xef7x8/SF410f1139Q+P+fPa74ONPBJ6Q/+TfzjGYmPq8AAAAASUVORK5CYII='

Advantages:

  1. svg is smaller
  2. svg is vector image format, it's better for compatibility
  3. you can remove useless todo 😄

学习了,CSS中内联SVG图片有比Base64更好的形式 « 张鑫旭-鑫空间-鑫生活

(1) [译]Base64 编码&性能 - 安逸 - SegmentFault 思否

@donaldshen
Copy link
Contributor

donaldshen commented Jun 5, 2020

image
打包后的产物中可以看到 placeholder.svg 是被 rollup-plugin-img 自动转换成 base64 的。或许你可以看看能否改改配置自动内联 svg

@shoyuf
Copy link
Member Author

shoyuf commented Jun 5, 2020

更新 rollup-plugin-img 为 @rollup/plugin-image@^2.0.1 即可解决外链 svg 的编码问题

但是。@rollup/plugin-image 说明文档中要求 Rollup v1.20.0+,我使用项目中 Rollup v1.19.4 编译也没有出现问题

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants