Skip navigation
Currently Being Moderated

SVG logo & responsive?

Dec 1, 2012 8:22 AM

Hi,

 

I have a responsive template. I have read that HTML5 supports & encourages SVG (scalable vector graphic) for logo use.

Is that correct? I can insert my SVG of the logo into my images folder and be good to go?

 

Thanks!

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 1, 2012 9:55 AM   in reply to r_tist

    r_tist,

     

    No, that's not how it works.

     

    HTML5 supports SVG and does encourage its use. But, it is for 'shapes' in your webpage, not the usage of SVG files directly!

     

    Like, you can draw shapes in SVG format in HTML5 webpages. Take a look at this link: http://blog.romanliutikov.com/coding/svg-in-html5-introduction/

     

    So, you can use SVG snippets in HTML5 to re-create your logo (depends on how complex it is) and render it as SVG.

     

    Read up about it on W3: http://www.w3schools.com/html/html5_svg.asp

     

    -ST

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 1, 2012 10:11 AM   in reply to r_tist

    To give you an example, the following SVG code produces a background-gradient in some browsers.

     

    body {

    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHh tbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdod D0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI +CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVud FVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjE wMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAxM2I4MiIgc3Rvc C1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE1JSIgc3RvcC1jb2xvcj0iIzA xM2I4MiIgc3RvcC1vcGFjaXR5PSIwLjYiLz4KICAgIDxzdG9wIG9mZnNldD0iMjAlIiBzd G9wLWNvbG9yPSIjMDEzYjgyIiBzdG9wLW9wYWNpdHk9IjAuOTMiLz4KICAgIDxzdG9wIG9 mZnNldD0iMjElIiBzdG9wLWNvbG9yPSIjMDYzZjg0IiBzdG9wLW9wYWNpdHk9IjEiLz4KI CAgIDxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjODBhNmIyIiBzdG9wLW9wYWN pdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNzIlIiBzdG9wLWNvbG9yPSIjMDEzYjgyI iBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNzclIiBzdG9wLWNvbG9 yPSIjMDEzYjgyIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iODIlI iBzdG9wLWNvbG9yPSIjMDEzYjgyIiBzdG9wLW9wYWNpdHk9IjAuNiIvPgogICAgPHN0b3A gb2Zmc2V0PSI4NyUiIHN0b3AtY29sb3I9IiMwMTNiODIiIHN0b3Atb3BhY2l0eT0iMCIvP gogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGh laWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+) ;

    }

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 1, 2012 10:59 AM   in reply to r_tist

    Hi

     

    Sorry to disagree with the previous replys, but -

     

    In all browsers that are html5 aware, you can use an svg img, (yoursvg.svg) directly in the html5 img tag, or as a css background-image, or even place the svg code directly on the page, (in-line).

     

    And if you are targeting only Safari or Firefox, you can include svg animations in your svg, and have the animation work even when inserted as a css background-image.

     

    PZ

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 1, 2012 11:14 AM   in reply to pziecina

    Hi

     

    Just an update to my reply -

     

    If you are going to use svg as an image, then do not forget to set the size by using the svg attribute 'viewPort'.

     

    PZ

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 29, 2012 4:36 PM   in reply to r_tist

    I still use jpgs and pngs for majority of real web sites.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 30, 2012 4:05 AM   in reply to r_tist

    Hi

     

    Use an IECC targeted at IE8 and below for the fallback image.

     

    A lot depends on what you are planning to do with the svg, if you are targeting mobile and desktop devices then an svg with a IECC falback is the x-browser and future proof method. Also if you are planning on animating the svg or using css transform/transitions or animations then svg is also resolution independent, (no loss of quality on retina displays, such as iPod/Pad/phone the new Mac books, or Samsung's hi-def displays).

     

    A lot depends on what devices you or your client wishes to target, or on any additional features for the site.

     

    No one should think that using svg/html5/css3 are simply better than older methods just because they are newer, the use of these must be part of an overall site strategy, and currently that also means one must know how to provide fallbacks.

     

    PZ

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points