グラデーションのSVGまたはCSS3の選択

Question

私が取り組んでいる新しいウェブサイトでグラディエントを頻繁に使いたいです。 CSS3やSVGでグラデーションを実装する方が良いかどうかは疑問に思っています。

通常、私はマルチストップリニアグラデーションが必要なので、両方とも自分のニーズを満たしています。

私は当初、これがCSS3で最もうまくいっていると思っていましたが、私の決定に疑問を呈しはじめ、他の意見に感謝します。これまで

私の思考ので、SVG（CSSの背景など）が良くなることである：それは私のCSSはブラウザが

簡単に接頭辞O/WクリーナーですIE9

で働く

• 勾配

CSS3の再利用であってもよい、より良い理由：

• は
• すべて1つの場所で、私はより良い実行するためにある答えを知っていない重要な考慮事項

ある？CSS

のための仕事のように思えるが少ないクライアントのダウンロード

背景グラデーションを実装するためのベストプラクティスはありますか？

Answer 1

：勾配を持っているすべての要素に 「勾配」クラスを追加し、IE9のサポートを完了するために、あなたのHTMLに 次のオーバーライドを追加彼女の仕事を信頼）、CSSグラデーションが速く、次のとおりです。 http://lea.verou.me/2011/08/css-gradients-are-much-faster-than-svg/

はUPDATE：

あなたがまた私にSVGを提供するためにmodernizrを使用して検討することもできE9はSVGの背景をサポートしていますが、CSSのグラデーションはサポートしていません。あなたのCSSで

あなただけだろう。ここ

.cssgradients #someElement { /* Gradient background rule. */ } 
.no-cssgradients #someElement { /* SVG background rule. */ } 

さらに詳しい情報：

http://modernizr.com

Answer 2

IEを幸せにすることに基づいてデザインを選択しないでください。漸進的な強化/段階的なブラウザサポートを使用し、IEをサポートリストの一番下に押します。

CSS3を選択：あなたのウェブサイトはIE上にグラデーションなしで表示されますが、これはおそらく許容できる妥協策です。

Answer 3

CSSとSVG（IE9用）を生成するには、http://www.colorzilla.com/gradient-editor/を使用する必要があります。

例：

background: #fefcea; /* Old browsers */ 
/* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmNlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMWRhMzYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
background: -moz-linear-gradient(top, #fefcea 0%, #f1da36 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* IE10+ */ 
background: linear-gradient(top, #fefcea 0%,#f1da36 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0); /* IE6-8 */ 

それは自動的にIE9のSVGコードをIE9（SVGを使用して）との完全なマルチストップグラデーションの

サポートを生成します。 （Iリー・ベルーによって行われるテストによると

<!--[if gte IE 9]> 
    <style type="text/css"> 
    .gradient { 
     filter: none; 
    } 
    </style> 
<![endif]--> 

Answer 4

を私は一度それを行うことができますように私は、SVGで私の線形勾配を実施することを選択した、私はもちろん最新のブラウザのみをサポートしています。

これはSVGです。一度だけ記述する必要があります。私は、cssを使ってx1y1とx2 y2の座標を定義する方法があるかどうかはわかりません。間違っていると証明されてうれしい。

したがって、CSSがx1y1 x2y2座標のグラジェントを実装できない場合、これはsvg線形グラデーションを使用する利点であると思います。

次のコードは、まっすぐ引き出されたインクスケールです。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  viewBox="0 0 200 200"> 

    <defs> 
     <linearGradient id="grad1" x1="26.3" y1="0.2" x2="26.5" y2="3.9" gradientUnits="userSpaceOnUse"> 
     <stop offset="0" style="stop-color:#0284a4;stop-opacity:0.9" /> 
     <stop offset="1" style="stop-color:#0284a5;stop-opacity:1" /> 
     </linearGradient> 
    </defs> 
    <path id="skylevel10" fill="url(#grad1)" d="m 0 -0 201 0 0 6.7 c 0 0 -29.8 1.2 Z"/> 
</svg>