Sunday, October 26, 2014

SVG fallback pure CSS: Can I use Part 5

Previous: External SVG: Can I use Part 4


SVG is old technology, but there are even older browsers in use that do not support SVG.
The idea of supporting such pure browsers is to provide PNG (JPG or GIF) image in background.

After making big research the best solution without using java-script is found with SVG trick:
  • switch tag, which takes first supported element
  • foreignObject tag, that gives ability to insert object from alien namespace
For inline SVG this works as:
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
  <switch>
     <circle cx="20" cy="20" r="18" stroke="grey" stroke-width="2" fill="#99FF66" />
     <foreignObject>
         <div class="nicolas_cage fallback"></div>
     </foreignObject>
  </switch>
</svg>
If browser supports SVG it will take <circle> as first child, otherwise <div class="nicolas_cage fallback"> is shown.

For external SVG we can use standard object fallback:
    <object type="image/svg+xml" data="circle_orange.svg">
     <div class="nicolas_cage fallback"></div>
    </object>

And inside <HEAD> just add a class with background image for fallback:
  <head>
    <style type="text/css">
     .nicolas_cage {
         background: url('nicolas_cage.jpg');
         width: 20px;
         height: 15px;
     }
     .fallback {
     }
    </style>
  </head>

For "No SVG" Nicolas Cage will show up

The <div> is chosen instead of <img> because image is mostly always downloaded by browsers, though {display: none} is set for <img>.

However test also showed that IE and Firefox still download background images for <div>, while Chrome and Safari works great with it. The twice download problem only occurs with
<foreignObject>
   <div class="nicolas_cage fallback"></div>
</foreignObject>
and is not a trouble for <object> fallback. At first I tried to set {display: none;} for <fallback> element in <head> style, but Android 2.x and Mobile Safari 4.0.4 parses it as object and hides hole object.

The solution is to set {display: none; background: none; } for <div>, then IE and Firefox stops download <div> background images. Finally the question appears:

How can we update <div> for SVG supporting browsers and hide it while leave it unchanged for those browsers that do not support SVG?

One solution is found, though it can not feet for all.
The trick is with ability of SVG to take a style from another SVG object.
 <svg id="SVG_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  
      width="20" height="20">
      <style>
        <![CDATA[
        .orange {
          fill: #FF9900;
        }
        ]]>
      </style>
 </svg>
 <svg id="SVG_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  
  width="20" height="20">
 <circle cx="10" cy="10" r="8" class="orange" />
</svg>

SVG_2 takes .orange style from SVG_1 even though they are different objects in one HTML file.

The solution is to paste special SVG inside <body> element with clear image style:
.fallback { background: none; background-image: none; display: none; }

And the result test page:
<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG demo</title>
    <style type="text/css">
     .nicolas_cage {
         background: url('nicolas_cage.jpg');
         width: 20px;
         height: 15px;
     }
     .fallback {
     }
    </style>
  </head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="width:0; height:0; display:0">
 <style>
 <![CDATA[ 
  .fallback { background: none; background-image: none; display: none; }
 ]]>
 </style>
</svg>

<!-- inline svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
  <switch>
     <circle cx="20" cy="20" r="18" stroke="grey" stroke-width="2" fill="#99FF66" />
     <foreignObject>
         <div class="nicolas_cage fallback"></div>
     </foreignObject>
  </switch>
</svg>
<hr/>
<!-- external svg -->
    <object type="image/svg+xml" data="circle_orange.svg">
     <div class="nicolas_cage fallback"></div>
    </object>
</body>
</html>

Starting tests in different browsers:

All renders great: small Cage for "No SVG" browsers and circles for those that support SVG.

What about fallback image downloading for SVG supporting browsers? 

Gladly double downloading does not occur with latest versions of browsers (IE 11, Chrome 38, Safari 8, Firefox 33).
As a plus this solution pushes strong hint to avoid downloading fallback images with 
.fallback { background: none; background-image: none; display: none; },
and it with a high degree will work for new SVG browsers that are hard to test (Kindle, Noble, etc).


UPD: eliminated error in CDATA closing tag ]]>, added style="width:0; height:0; display:0" to SVG fallback.
Posted by at

33 comments:

  1. An excellent information provided thanks for all the information i must say great efforts made by you. thanks a lot for all the information you provided.please visit:Packers And Movers Bangalore

    ReplyDelete

  5. Really impressive post. I read it whole and going to share it with my social circules. I enjoyed your article and planning to rewrite it on my own blog. please visit here @ Packers and Movers Mumbai

    ReplyDelete

  9. I cannot truly enable but admire your weblog, your weblog is so adorable and great.It has given me courage to try scarier things. I tend to steer clear of them but not anymore.
    Packers And Movers Hyderabad

    ReplyDelete


  11. شركة نقل اثاث بالدمام تقدم خدمات لا حصر لها رائعة لتلبية طلبات العميل وتحقيق كل ما يتمناه في خدمات نقل العفش بالدمام فثقتنا في اعمالنا جيدة قد وضعتنا كخبراء داخل مجال نقل الاثاث حيث يتم التشاور مع حقيبة مختلطة من داخل شركة نقل عفش بالدمام عن اختيار المواد الخاصة بك والمواد أو الأشياء من على عتبة منزلك لتصل جميع ممتلكاتك بأمان إلى المكان الذي ترغب فيه
    شركة نقل الاثاث بجدة لدينا ميل الي التفكير في إعطاء نوع من الإدارات لدي شركة نقل اثاث بجدة التي تطوير انفسهم ومتابعة كل ما هو حديث في عالم نقل الاثاث المنزلي والبحث عن الطرق الحديثة التي تؤدي الي انجاز المهمة بكل سهولة والتي تترك نجاح باهر يمكن أن يساعد على ارضاء نفسية عملائنا.لدينا الميل في شركة نقل عفش بجدة إلى أن يشار جيدا إلى السيارات الحديثة التي نمتلكها علي انها ذات كفاءة عالية كما نمتلك عمال تنزيل علي اعلي مستوي كما يوجد لدينا في خدمة نقل عفش بجدة
    فنين فك وتركيب لديهم القدرة الكافية علي التعامل مع جميع انواع الاثاث كما اننا نمتاز باننا نمتلك المغلفون الذين يقومون بتغليف جميع الاثاث المنزلي للحفاظ عليه من الغبار والتكسير كل هذه العوامل التي تقدمها شركتنا نتيجة للمعيار والتنمية والعقل
    شركة نقل الاثاث بمكةتكتشف مجموعتنا الخاصة في فريق شركة نقل اثاث بمكة في خدمتك في أي وقت من اليوم وأنها مستعدة للبقاء طيلة الوقت لمساعدتك في نقل اثاث منزلك سواء كان بيتك كبير او صغير قهذه ميزة الشركات الكبيرة التي تقدم الخدمات المتميزة فنحن نأمل دائما لإعطاء أفضل انطباع من تجربة نقل ممتازة. يتم اتخاذ كل خطوة الرعاية من قبل فريقنا والتعامل مع أفضل طريقة ممكنة. لدينا في شركة نقل عفش بمكة المتخصصين هم أيضا على استعداد للرد على الاحتياجات الفورية لعملائنا الكرام.
    مستودعات تخزين الاثاث بالرياضالتعبئة والتغليف واحدة من أكثر المعترف بها في خدمة نقل وتخزين الاثاث بالرياض فخدمة التعبئة والتغليف لدي شركة تخزين اثاث بالرياض يمكن أن يحصل على انتباه الكثير من العملاء وهذا يرجع ببساطة إلى أننا نواصل الوفاء بطلباتهم. كما قمنا بتطوير وواصلنا تقديم أفضل الخدمات التي تحافظ علي ممتلكتهم في مستودعات تخزين العفش التي تكمل في الحفاظ علي الأموال المدفوعة في ممتلكتهم لحين الرجوع اليها مرة أخري
    شركة تخزين اثاث
    الشيء المثير للإعجاب بالنسبة الينا في شركة تخزين عفش بالرياض هو أن فريقنا على استعداد لخدمتك في أي وقت من اليوم لطالما كنت بحاجة لدينا فنحن نواصل إقناع عملائنا التأمين علي جميع العناصر الخاصة بهم. هذا هو السبب الرئيسي لماذا بقينا على أنها

    ReplyDelete



  12. تعد شركتنا افضل شركة صيانة مكيفات بمدينة جدة حيث توفر لكم الشركة خدمات ممتازة وراقية
    شركة صيانة مكيفات بجدة
    بالاضافة الي قيام الشركة بعمليات التنظيف علي اكمل وجه ونقدم لكم خدمة تنظيف المكيفات بشكل راقي جدا
    شركة تنظيف مكيفات بجدة
    ونحن كاسم كبير نقوم بخدمات كشف التسربات بمكة ونقوم بالعمل بافضل الاجهزة ونمتلك افضل الفنيين المتخصصين
    شركة كشف تسربات بمكة
    كما يتوافر في الشركة خدمات العزل بكل انواعها واحجامها وتعد ايوان افضل شركة عوازل بجدة لما توفره لعملائها من خدمات علي مستوي عالي وراقي جدا
    شركة عوازل بجدة

    ReplyDelete

  13. فى شركة العربى نقدم خدمة شركة تنظيف بحائل ان النظافه هى من اكثر واهم الامور التى قد تعفى الانسان من الامراض الكثيره لذلك شركة العربى تسعى دائما ان تقدم جميع اعمال التنظيف الى عملائها الذين يثقون بها
    شركة تنظيف بحائل
    كما تقدم افضل الطرق الحديثه وتوفر لهم الراحه التامه وعدم المشقه فان شركتنا تسعد ان تقدم لحضراتكم افضل انواع النظافه العامه
    شركة تنظيف فلل بحائل
    وتحب ان تقدمها على اعلى مستوى من المستويات وفى نفس الوقت ان شركتنا لا تقبل المنافسه فى الاسعار حيث ان شركة العربى تعمل فى جميع اعمال النظافه فى حائل بارخص الاسعار وتقدم افضل العروض دائما لعملائها الكرام
    شركة تنظيف مجالس بحائل
    من أهم أسباب سعادة الانسان وبالأخص عندما يتعلق الأمر بكيف يبدو منزلك, فإن تطلعاتك وأحلامك تصبح كبيرة، فمنزلك هو انعكاس لك، ولهذا السبب أنت بحاجة إلى
    شركة تنظيف منازل بحائل
    شركة تنظيف رخيصة ومجربة وثبتت انها الافضل بين الشركات فنحن نقدم افضل خدمات التنظيف فى شركة العربى حيث نضمن لك عملية التنظيف بدون اى اخطاء لاننا نسعى دائما لنكون افضل
    شركة تنظيف كنب بحائل
    وهدفنا هو الوصول الى القمه وكل ذلك عن طريق ارضاء عملائنا وتحسين ثقتهم بنا والقيام بعملنا على احسن وجه ولدينا فروع اخرى فى مدينة جازان مثل
    شركة تنظيف بجازان
    فنحن نقدم لكم شركة العربى من الشركات المميزه والرائده فى جازان وهى تقدم تنظيف البيوت على احسن وجه كما تقدم تنظيف فلل وتنظيف شقق وتنظيف مجالس وتنظيف واجهات وتنظيف مسابح وتنظيف خزانات
    شركة تنظيف منازل بجازان
    وتقوم شركتنا بالاعتماد على احدث الالات وعلى افضل انواع المنظفات العالميه التى تعمل على ازالة البقع كما تعمل على ازالة الاوساخ بسرعه كبيره وتقوم بخدمات اخرى كثيره
    شركة تنظيف مجالس بجازان
    وكل ذلك نقوم به من خلال شركتنا شركة العربى بافضل الاسعار وارخصها التى تتناسب مع جميع الطبقات من العملاء والموظفين وغيرهم من الذين يقيمون فى جازان
    شركة تنظيف كنب بجازان






    ReplyDelete



  14. عزيزى العميل يمكنك من خلال شركتنا بما تمتلك من ادوات واجهزه حديثه الحصول على اعلى مستويات النظافه لخزان المياه لديك يمكنك الاعتماد على شركتنا لتميزها فى هذا المجال وهو مجال تنظيف الخزانات بحائل
    شركة تنظيف خزانات بحائل
    فنحن من افضل الشركات المتخصصة في اعمال التنظيف وعزل الخزانات مع الالتزام الكامل بين العملاء والشركة فنحن نقدم لكم افضل العماله المدربه والمتميزه في استخدام افضل الالات والمعدات الحديثه لاتمام عملية تنظيف الخزان
    شركة تنظيف خزانات بجازان
    قد يظن البعض أن أعمال نقل الاثاث ونقل العفش الخاص بالمنازل أو الفلل أو الشقق أمرا يسيرا وأى فرد لديه سيارة نقل يستطيع أن يقوم بهذه المهمة
    شركة نقل اثاث بحائل
    ولكن الحقيقة عكس ذلك فان الاعتماد على ألاشخاص العاديين أو الحاصلين على الاجرة ليس بالامر السليم من أجل الحفاظ على أثاث منزلك ولكن الحل الأمثل لك هو الاعتماد على شركه متخصصه تكون كفيله بكافة اعمال منزلك
    شركة نقل عفش بحائل
    سبب تميزنا فى شركة العربى احدى الشركات الاولى فى مجال نقل اثاث بجازان عن طريق العمل الجاد والخبره الطويله التى حصلنا عليها من خلال اعمالنا المتعدده التى قمنا بها حيث وفرنا لعملائنا عمال ماهرون وسيارات نقل حديثه
    شركة نقل عفش بجازان
    الحشرات ستجد انه من اكبر واوسع المجالات التى تعمل بها العديد من الشركات فى حائل وجازان لانه نظرا للبيئه الصحراويه وطبيعة الجو الصحراوى بالمملكه فطبيعة الجو هناك تساعد على انتشار العديد من انواع الحشرات
    شركة مكافحة حشرات بجازان
    او باى منطقه اخرى ستجدنا ان شاء الله
    عملائنا الكرام دعونا نصطحبكم من خلال الاسطر القليله القادمه فى التعرف على الحشرات الخطيره فى المملكه حيث انها من اهم واخطر الحشرات التى تنتشر فى المملكه وهى ماتسمى بحشرة النمل الابيض
    شركة رش مبيدات بجازان
    حيث انها تؤثر على البنايات والقواعد الخرسانيه مما يجعلها مهدده دائما بالسقوط اذا تمكن منها النمل الابيض ودور شركتنا هو القضاء على حشرة النمل الابيض نهائيا
    شركة مكافحة حشرات بحائل






    ReplyDelete
    Replies


    1. شركة نوران Nouran للخدمات المنزلية
      تقدم شركة نوران Nouran بحفر الباطن خدمات تنظيف المنازل والشقق والفلل وخدمات كشف تسربات المياة وعزل الأسطح وعزل الخزانات وجلي البلاط وتركيب السيراميك والرخام والبورسلان وجميع أنواع البلاط وصيانة التكييفات القديمـة والحديثة بأحدث الوسائل المتطورة وتركيب وتنفيذ الكلادينج بالإضافة إلى خدمات تسليك الصرف الصحي وشفط البيارت وتنظيف السجاد والموكيت وجميع أنواع المفروشات المنزليـة ومن الخدمات التي تقدمها شركة نوران بحفر الباطن خدمات نقل العفش والأثاث إلى أي مكان داخل أو خارج حفر الباطن وخدمات أعمال الدهانات والسباكــة.

      شركة تنظيف سجاد بحفر الباطن
      شركة كشف تسربات بحفر الباطن
      شركة تنظيف خزانات بحفر الباطن
      شركة عزل خزانات بحفر الباطن
      شركة تنظيف منازل بحفر الباطن
      شركة مكافحة حشرات بحفر الباطن
      شركة نقل عفش بحفر الباطن
      موقع للخدمات المتكاملة بحفر الباطن

      Delete

  15. Packers and Movers Bangalore for 100% Affordable and Professional Packers and Movers in Bangalore. Compare Charges of Movers and Packers, Household Shifting Services at.
    Packers And Movers Jaipur

    ReplyDelete

  16. بسم الله الرحمن الرحيم قال سبحانهُ وتعالى في كتابهِ العزيز ( وَجَعَلْنَا مِنَ الْمَاء كُلَّ شَيْءٍ حَيٍّ أَفَلَا يُؤْمِنُونَ ) الأنبياء - صدق الله لذلك جميعنا يعرف قيمة المياه جيداً, والحفاظ على المياه من الفقدان بالطُرق الغير سليمة أمرًا ضرويًا للغاية وهو واجب دينيّ في المقام الأول قبل أن يكون واجب أخلاقي و من أجل أيضًا عدم إهدار المال ودفع فواتير بمبالغ مادية مرتفعةٌ. كوكب الأرض بمرور الوقت يفقد الكثير من المياه لذلك نبذُل أقصى قصاري جُهدنا للمحافظة على المياه, والرغم من الجهود المُضنيّة للحفاظ على المياه, يتم فقدان الكثير من المياه في المنازل والمولات والفلل وبيوتنا والأسواق التجارية, ولكن عندما نواجه تسرب المياه من الأنابيب علينا إصلاح العطب بأقصى سرعة من أجل الإستفادة من المياه وعدم إهدارها بطريقة سيئة, لذلك يمكنك الإتصال بأفضل شركة كشف تسربات المياه بالمملكة العربية السعودية لإصلاحها.
    شركة كشف تسربات بينبع
    شركة كشف تسربات بخميس مشيط
    شركة كشف تسربات بمكة
    شركة كشف تسربات بأبها
    شركة كشف تسربات بنجران
    شركة كشف تسربات بجازان
    شركة كشف تسربات بالقصيم
    الدليل السعودي للإعلانات المدفوعة

    ReplyDelete


  17. أفضل شركة مكافحة حشرات بالدمام - ضهوة 0505108424
    عندما نعلن عن تصدينا لمكافحة الحشرات نكون بذلك قد تحملنا مهمة ليست هينة ، حيث نكون في الواقع بصدد التعامل مع أكثر الكائنات الحية جرأة على اختراق منزلك ومشاركتك فيه بما في ذلك الطعام والأماكن الدافئة المفضلة لديك وحتى كتبك التي تقرأها ، لا شك أن الأمر يحتاج إلى قوة عظيمة لإقناعها بمغادرة منزلك إلى الأبد ، ونحن في شركة مكافحة حشرات بالدمام على قدر هذه المهمة ، بما استطعنا تطويره من تقنيات وما نمتلك من معدات وأسس علمية مدعومة بخبرة طويلة ، علاوة على ما يغلف ذلك من ضمانات طويلة على الخدمة

    شركة مكافحة حشرات بالدمام

    https://alfaris-aleurbaa.com

    #هل_تتزوج_بنت_فاتحه_الخاص #الجرب_يا_صحه_اقترب #القنفذه #طبع_ودك_تتخلص_منه

    ReplyDelete

  20. We Provide Best Packers And Movers Noida List for Get Free Best Quotes, Compare Charges, Save Money And Time, Household Shifting Services
    Packers And Movers Noida

    ReplyDelete

  21. QuickBooks Payroll Error 12157 falls under the 12000 error code arrangement that mostly happens because of Web availability issues in Windows Operating System with Microsoft Win32 Internet, which is otherwise called WinInet API. QuickBooks utilizes the API for speedy access Internet Protocols like FTP, HTTP and Gopher. The QuickBooks Error 12157 happens when the client downloads or introduces most recent updates with the product.

    ReplyDelete

  22. Manish Packers and Movers Pvt Ltd as a Services providing company can make all the difference to your Home Relocation experience. Indore based Company which offers versatile solutions, Right team that easily reduce the stress associated with a Household Shifting, Vehicle Transportation. we help things run smoothly and reduce breakages and offer you seamless, Affordable, Reliable Shifting Services, Compare Shifting Charges, Visit :
    Manish Packers and Movers Ptv Ltd @ https://www.manishpackersmoversindore.in/
    Packers and Movers Indore @ https://www.manishpackersmoversindore.in/packers-and-movers-indore.html
    Manish Packers Indore @ https://www.manishpackersmoversindore.in/manish-packers-and-movers-indore.html
    Packers and Movers Gurgaon @ https://www.manishpackersmoversindore.in/packers-movers-gurgaon.html
    Packers and Movers Kolkata @ https://www.manishpackersmoversindore.in/packers-movers-kolkata.html
    Packers and Movers Mumbai @ https://www.manishpackersmoversindore.in/packers-movers-mumbai.html
    Packers and Movers Bhopal @ https://www.manishpackersmoversindore.in/packers-movers-bhopal.html
    Packers and Movers Nagpur @ https://www.manishpackersmoversindore.in/packers-movers-nagpur.html
    Packers and Movers Raipur @ https://www.manishpackersmoversindore.in/packers-movers-raipur.html
    Packers and Movers Ahmedabad @ https://www.manishpackersmoversindore.in/packers-movers-ahmedabad.html

    ReplyDelete

  24. Hire Manish Packers and Movers Pvt Ltd in India for hassle-free Household Shifting, Office Relocation, Car Transportation, Loading Unloading, packing Unpacking at affordable Price Quotation. Top Rated Safe and Secure Service Providers who can help you with 24x7 and make sure a Untroubled Relocation Services at Cheapest/Lowest Rate. Visit More :-
    Manish Packers and Movers Pvt Ltd
    Packers and Movers Bangalore
    Packers and Movers Gurgaon
    Packers and Movers Indore
    Packers and Movers Kolkata
    Packers and Movers Mumbai
    Packers and Movers Nagpur
    Packers and Movers Ahmedabad
    Manish Packers in Indore
    Manish Packers and Movers Pvt Ltd Sitemap

    ReplyDelete

  27. Call Our Quickbooks Enterprise Help Number 1888-557-6950 is offer the administration: QuickBooks Error, QuickBooks Backup, QuickBooks Software Install and Update, QuickBooks Drivers, QuickBooks Enterprise, QuickBooks Payroll, QuickBooks Premier, QuickBooks Pro Adviser, QuickBooks Troubleshoot, multi utilize mode issue or any sort of specialized and utilitarian issue.

    ReplyDelete

  28. In the event that the clients can't see the connection check your Credentials, at that point take a stab at refreshing the record inside QuickBooks Online. On the upper right corner, tap on the Update catch. Keep running no less than three updates amid the non-top hours. In the event that the login data is acknowledged then the record should be physically refreshed. On the off chance that the issue still holds on and the QuickBooks Banking Error 103 or 310 doesn't get settled look for assistance from client care utilizing the beneath specified data.

    ReplyDelete

Subscribe to: Post Comments (Atom)