Dữ liệu SVG Stylus inline uri mà không có mã hóa base64

Question

Làm cách nào để nhúng uri dữ liệu SVG vào CSS bằng cách sử dụng bộ xử lý trước Stylus mà không có SVG được mã hóa Base64?

Như thế này:

background: url('data:image/svg+xml;utf8,<svg>[...]</svg>'); 

thay vì điều này:

background: url('data:image/svg+xml;base64,PD94bWwg[...]'); 

Normaly Tôi đã sử dụng stylus.url() để nhúng hình ảnh, nhưng nó cũng sẽ Base64 mã hóa SVGs.

Tôi muốn sử dụng dữ liệu uris thay vì tệp bên ngoài để lưu yêu cầu tệp. Và tôi đã nhận ra rằng mã hóa Base64 của Base64 thực sự thêm byte thay vì giảm kích thước.

Tôi không thể tìm thấy phương pháp để nhúng SVG.

Answer 1

Vì tôi không thể tìm thấy một cách được thiết lập để làm điều này, tôi phải tự giải quyết. Tôi đã viết một mô-đun nút đơn giản kết thúc tốt đẹp stylus.url() nhưng thay thế cách thức SVG được inlined.

Liên kết với các mô-đun: https://www.npmjs.com/package/stylus-inline-svg

Trừ một số kiểm tra nó về cơ bản thực hiện điều này:

found = stylus.utils.lookup(url.string, options.paths); 

if(!found) return literal; 

buf = fs.readFileSync(found); 

buf = String(buf) 
    .replace(/<\?xml(.+?)\?>/, '') 
    .replace(/^\s+|\s+$/g, '') 
    .replace(/(\r\n|\n|\r)/gm, ''); 

return new stylus.nodes.Literal("url('data:image/svg+xml;utf8," + buf + "')"); 

Answer 2

Stylus nay đã chức năng này được xây dựng trong:

http://stylus-lang.com/docs/functions.url.html

Các embedurl chức năng với sự hỗ trợ utf8 đã được thêm vào trong phiên bản 0.54.0 trên 05 tháng 3 năm 2016.

Answer 3

Sử dụng CSS Literal:

@css { 
    .svg { 
     background: url('data:image/svg+xml;base64,PD94bWwg[...]'); 
    } 
} 

Biên soạn để:

.svg { 
     background: url('data:image/svg+xml;base64,PD94bWwg[...]'); 
    }