Chọn SVG hoặc CSS3 cho các gradient

Question

Tôi muốn sử dụng gradients nhiều trong một trang web mới mà tôi đang làm việc. Tôi đã tự hỏi nếu nó sẽ là tốt hơn để thực hiện các gradient trong CSS3 hoặc SVG.

Thông thường tôi chỉ cần đa dừng gradient tuyến tính vì vậy cả hai đáp ứng nhu cầu của tôi ở đó.

ban đầu tôi giả định này là cố gắng hết sức trong CSS3, nhưng bắt đầu đặt câu hỏi về quyết định của tôi và sẽ đánh giá cao ý kiến ​​khác.

Suy nghĩ của tôi vậy, đến nay là SVG (như là một nền CSS) có thể tốt hơn vì:

• Nó hoạt động trong IE9
• CSS của tôi là sạch w/o trình duyệt tiền tố
• dễ dàng tái sử dụng của gradient

CSS3 có thể tốt hơn vì:

• Có vẻ như một công việc cho CSS
• Ít tải cho khách hàng
• Mọi thứ đều ở một nơi

Một quan trọng xem xét mà tôi không biết câu trả lời là, thực hiện tốt hơn?

Có một thực hành tốt nhất cho việc thực hiện gradient nền?

Answer 1

Theo một thử nghiệm được thực hiện bởi Lea Verou (I tin tưởng công việc của mình), gradient CSS nhanh hơn: http://lea.verou.me/2011/08/css-gradients-are-much-faster-than-svg/

UPDATE:

Bạn cũng có thể xem xét sử dụng Modernizr để phục vụ lên SVG I E9 hỗ trợ nền SVG nhưng không hỗ trợ gradient của CSS.

Trong CSS của bạn, bạn sẽ chỉ làm:

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

Thông tin thêm ở đây:

http://modernizr.com

Answer 2

Đừng làm cho sự lựa chọn thiết kế của bạn dựa trên làm cho IE hạnh phúc. Sử dụng hỗ trợ trình duyệt nâng cao/xếp loại nâng cao và đẩy IE vào cuối danh sách hỗ trợ của bạn.

Chọn CSS3: trang web của bạn sẽ chỉ xuất hiện mà không gradient trên IE, mà có lẽ là một sự thỏa hiệp chấp nhận được để thực hiện.

Answer 3

Bạn nên sử dụng http://www.colorzilla.com/gradient-editor/ để tạo CSS và SVG (đối với IE9) cả hai.

Ví dụ:

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 */ 

Nó tự động tạo ra IE9 đang svg

Hỗ trợ đầy đủ gradient đa-stop với IE9 (sử dụng SVG). Thêm một lớp "dốc" cho tất cả các yếu tố của bạn có một gradient, và thêm ghi đè sau để HTML của bạn để hoàn thành việc hỗ trợ IE9:

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

Answer 4

tôi đã chọn để thực hiện gradient tuyến tính của tôi trong svg như tôi có thể làm điều đó một lần, tôi tất nhiên chỉ hỗ trợ các trình duyệt hiện đại.

Đây là SVG, tôi chỉ cần mô tả nó một lần. Tôi không chắc chắn nếu có một cách để xác định các phối hợp x1y1 và x2 y2 bằng cách sử dụng css. hạnh phúc để được chứng minh sai.

Vì vậy, nếu CSS không thể thực hiện một gradient với x1y1 x2y2 phối hợp tôi đoán đây là một lợi thế của việc sử dụng gradient tuyến tính svg.

mã sau có thể được lấy thẳng ra khỏi cảnh quan.

<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>