Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I'm converting pdf files to svg as it is easier to use svg files on webpages. I first thought the quality of svg must be similar to pdf, as they are both vector graphics.

However, now I look a little better on it, it seems that pdf is a bit superior:

enter image description here

I wonder if I could change this in some way.

  • Is this because pdf vectors are just better quality ?
  • Or is this because chrome renders svg in lower quality than adobe reader renders pdf ?
  • Is this a setting in the svg file that I could change ?

Here is the pdf file: https://dl.dropboxusercontent.com/u/58922976/syllabusLinAlg2012.59.pdf
And here is the svg file: https://dl.dropboxusercontent.com/u/58922976/syllabusLinAlg2012.59.svg

I've made this svg file in illustrator, and only chrome is able to use the embedded svg fonts. So firefox and internet explorer won't give the expected result.

share|improve this question

1 Answer 1

They are both vector based so they are equivalent in quality. The difference you are seeing is how the browser renders each format. Behind the scenes, the pdf file is being interpreted by an add on-- in Chrome, the add on is a pdf viewer that comes packaged with the browser by default. When the file type ends in pdf it essentially tells the viewer, "this is a pdf, use the program to interpret the contents." Svgs on the other hand, are interpreted differently in a browser setting. In Chrome this file type goes to the Webkit rendering engine and the engine graphically renders the svg.

So the difference in quality is not inherent in the type, but how the browser is rendering it and making it viewable.

I've dived in to the source code and given you an example of a letter that I've blown up to 640px in the actual svg document you've provided. As you can tell, the font looks incredibly smooth and high quality. The difference is, that at this level it is easier for the webkit engine to display the font in its full glory, whereas at a smaller level there are sacrifices the rendering engine makes.

enter image description here

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.