css/svgは大きな背景画像を作成します

Question

私は、少し大きめのバージョンで既存のライブラリの背景画像を置き換えようとしています。参考までに、ドラッグ可能なアイテムの隅にあるちょっとしたドラッグハンドルです。

position: absolute; 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/P…4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=) bottom right no-repeat; 
background-origin: content-box; 

私はdata:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/P…4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=が生成されたか疑問に思って、わずかに大きいハンドルに自分自身を行うことが可能である場合：検査時には、私は、元のdevのはちょうどそのような小さな背景画像を設定してご覧ください。私はPhotoshop/Illustratorのようなツールにアクセスできますが、おそらくそれは過度のものだと考えています。小さな灰色のハンドルを多分5pxずつ大きくしたいと思っています。どこから始めるべきかわからない場合は、アドバイスを歓迎します。ありがとう！

編集 - ここでは、元の開発者が*画像リソースの不要なリクエストを避けるために、データURIと呼ばれる巧妙なテクニックを使用codepen http://codepen.io/ajmajma/pen/NAmPQx

Answer 1

です。これは、構文：data(mime-type;base64,base64-string)を使用して行います。

開き、ブラウザで開発者ツールのコンソールと、次のコード（base64文字列はあなたの例からである）を実行します。

atob('PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=') 

を結果はブラウザがこの画像を見てどのようである：

<?xml version="1.0" standalone="no"?> 
<!-- Generator: Adobe Fireworks CS6, Export SVG Extension by Aaron Beall (http://fireworks.abeall.com) . Version: 0.6.1 --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg id="Untitled-Page%201" viewBox="0 0 6 6" style="background-color:#ffffff00" version="1.1" 
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" 
    x="0px" y="0px" width="6px" height="6px" 
> 
    <g opacity="0.302"> 
     <path d="M 6 6 L 0 6 L 0 4.2 L 4 4.2 L 4.2 4.2 L 4.2 0 L 6 0 L 6 6 L 6 6 Z" fill="#000000"/> 
    </g> 
</svg> 

SVGコードは、任意のビジュアルエディタまたはテキストのみで編集し、ブラウザのコンソールbtoa('updated-svg-code')で実行することができます。結果の文字列をdata:image/svg+xml;base64,%UPDATED%で囲み、backgroundイメージとして使用します。

atobおよびbtoaの詳細については、base64の操作、see an article at MDNのJavaScript関数を参照してください。

* - 余分なリクエストを避けるための料金は、CSSファイルサイズの33％増加することに注意してください。これは通常、GZIP圧縮の使用によって軽減されます。