SVG images faster to load than high quality pngs?

Hi guys,
I am having some problems loading large images that are high quality jpegs and it was recommended to me that I convert them to the svg file type.

Therefore, I have a few questions I was hoping someone could answer me…

1.) Im guessing svg are high in quality because they are vectors?
2.) Do they load faster than normal jpegs or pngs because they are based on code
3.) Can I used them as images on the web as background-images in css or just using the <img /> tag?
4.) Can i save my Adobe illustrator files to the svg file format type?

Thanks in Advance & Best Regards,
Team 1504

The SVG shouldn’t really load any quicker or slower if the “filesize is the same” but remember older browsers may not support SVG natively but SVG can usually make advantage of gzip as they are XML files.

Sometimes simple SVG would likely be smaller than a bitmap file so would load quicker but that’s purely to do with filesize not format.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
  <linearGradient x1="99.7" x2="0" y1="0" y2="0" id="redfade">
   <stop offset="0" stop-color="rgb(203, 203, 202)" />
   <stop offset="1" stop-color="rgb(255, 255, 255)" />
  </linearGradient>
</defs>
<use xlink:href="#box-gray"/> <use xlink:href="#circle_1"/>
<use xlink:href="#circle_2"/> 
  <line x1="100" y1="300" x2="100" y2="100"/>
  <!--add more content--> 
  <circle cx="90" r="75" cy="90" fill="red" id="circle_1" />
</svg>

Furthermore although good browsers support SVG usually they don’t always support the full SVG specifications.

The above file would roughly be 609 bytes obviously if you had a bitmap version you’d probably expect a few kilobytes.

What other suggestions have you tried? I would have thought that moving to a format other than the main three would be admitting defeat at optimizing your images properly. What was the nature of your difficulty in getting them to load that led you to seeking out alternatives?

I anticipate that the problem you have in loading large files is that the page speed is slow?

I would try:

  1. moving all your images to a sub-domain
  2. convert all the relevant img tags to a div background url.
  3. ensure that the image dimensions are specified, preferably in your stylesheet.css

The reasons for the above suggestions are gleaned from this blog: http://www.askapache.com/htaccess/apache-speed-subdomains.html

Item 3 will ensure that an outline of the page is loaded and the images will gradually load and display in their relevant containers. The incremental loading will give the user the impression that the page is loading faster :slight_smile:

Also take a look at look at Google “Page Speed” which itemises each element bottleneck.

Well I first tried pngs and I realised that when
I could use jpgs, when there was no alpha transparency, to use jpgs and that helped the page loading speed greatly.

However, I prefer vector graphics and learning that i could use a vector format for the web and have the possibility for it to load faster peaked me
interest.

I also feel that some of the slow loading
is due to me testing it on my test server & not my actual server withba better connection to the Internet and better speeds.

So the main reasons for seeking help
with svg images is the cleansliness & potential for faster loading.
So in other words, I want to keep quality and have it load fast.

exactly

currently the images I am having porblems with are the backgrounds on HTML elements / div tags.
I will look into the first and second steps as well to though.

]The SVG shouldn’t really load any quicker or slower if the “filesize is the same” [/QUOTE]
but what about in tha case of having an image as a png and then exporting it as a jpg. Although they are the same image then how does thevjpg load much faster?

what parts of svg wouldn’t they support?
And by nativley do you mean without the usage of JavaScript, annother script, or add-on?
Also, what is gzip and why is it good to take
advantage of it?

Thank you guys for all your help and
helping me learn.
I hope to hear from you soon & thanks in advance,
Team 1504

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
  <linearGradient x1="99.7" x2="0" y1="0" y2="0" id="redfade">
   <stop offset="0" stop-color="rgb(203, 203, 202)" />
   <stop offset="1" stop-color="rgb(255, 255, 255)" />
  </linearGradient>
</defs>
<use xlink:href="#box-gray"/> <use xlink:href="#circle_1"/>
<use xlink:href="#circle_2"/> 
  <line x1="100" y1="300" x2="100" y2="100"/>
  <!--add more content--> 
  <circle cx="90" r="75" cy="90" fill="red" id="circle_1" />
</svg>

Furthermore although good browsers support SVG usually they don’t always support the full SVG specifications.

The above file would roughly be 609 bytes obviously if you had a bitmap version you’d probably expect a few kilobytes.[/QUOTE]

You might have been using progressive loading images or images filled with a lot of additional image meta data not needed for a web browser and hence the perceived difference in rendering speed.

You cannot compare a PNG file using alpha transparency with a JPG because the latter doesn’t offer any transparency.

Native means no plugin/addon required and since many good browsers like Firefox support XHTML that means they typically support SVG natively because you can embed SVG directly into certain versions of XHTML.

I don’t know how accurate this is but here is a loose comparison of some of the supported elements.
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Scalable_Vector_Graphics%29

Since obviously with SVG you can use hyperlinks. For example: http://www.projectaon.org/en/Main/FlightFromTheDark locate the gzipped flowchart third item on the bullet list: “View flowchart” it offers the SVGZ version.

Gzip compression is offered by a lot of Apache servers to compress files while transferring them and you can save SVG as SVGZ in several software applications for uploading to the server.