Jay Taylor's notes

back to listing index

IE10 crops SVG instead of resizing

[web search]
Original source (stackoverflow.com)
Tags: css internet-explorer svg stackoverflow.com
Clipped on: 2016-05-02

I solved the issue where IE10 would only resize an image if styled with css, now IE10 is cropping an SVG instead of resizing it. No other browser has this issue.

I've tried all different combinations of only declaring height or width while setting the other dimension to auto and not setting it or setting both. I've also tried preserveAspectRatio="none" on the img tag.

asked Apr 9 '13 at 15:09
Image (Asset 2/2) alt=
Archonic
2,66142041
up vote 17 down vote accepted

It turns out IE is the only browser that needs the viewBox to be set in order to scale an svg. I used a free program called inkscape to create my svg and it doesn't set the viewbox. Open the svg with a text editor and add this to the <svg... declaration:

viewBox="0 0 64 64"

Instead of 64, enter whatever the x and y of your bottom right corner should be for the size of the original svg. Not sure weather to blame IE10 or inkscape...

Update: You can update to inkscape 0.91 and the viewbox attribute will be added automatically.

answered Apr 9 '13 at 15:13
Archonic
2,66142041
14 upvote
  flag
Changed my mind. I blame IE. – Archonic May 7 '13 at 23:02
1 upvote
  flag
thanks a lot I searched for days.. – bAN Jan 9 '15 at 11:06
   upvote
  flag
If you know where to search (thanks a lot), it's easy to find solutions: wiki.inkscape.org/wiki/index.php/… (quickest solution: Update InkScape to 0.91 and the attribute will be added automatically) – BurninLeo Feb 5 '15 at 20:09

Your Answer

asked

3 years ago

viewed

2563 times

active

9 months ago
Technology Life / Arts Culture / Recreation Science Other
  1. Stack Overflow
  2. Server Fault
  3. Super User
  4. Web Applications
  5. Ask Ubuntu
  6. Webmasters
  7. Game Development
  8. TeX - LaTeX
  1. Programmers
  2. Unix & Linux
  3. Ask Different (Apple)
  4. WordPress Development
  5. Geographic Information Systems
  6. Electrical Engineering
  7. Android Enthusiasts
  8. Information Security
  1. Database Administrators
  2. Drupal Answers
  3. SharePoint
  4. User Experience
  5. Mathematica
  6. Salesforce
  7. ExpressionEngine® Answers
  8. more (13)
  1. Photography
  2. Science Fiction & Fantasy
  3. Graphic Design
  4. Movies & TV
  5. Seasoned Advice (cooking)
  6. Home Improvement
  7. Personal Finance & Money
  8. Academia
  9. more (9)
  1. English Language & Usage
  2. Skeptics
  3. Mi Yodeya (Judaism)
  4. Travel
  5. Christianity
  6. Arqade (gaming)
  7. Bicycles
  8. Role-playing Games
  9. more (21)
  1. Mathematics
  2. Cross Validated (stats)
  3. Theoretical Computer Science
  4. Physics
  5. MathOverflow
  6. Chemistry
  7. Biology
  8. more (5)
  1. Stack Apps
  2. Meta Stack Exchange
  3. Area 51
  4. Stack Overflow Careers
site design / logo © 2016 Stack Exchange Inc; user contributions licensed under cc by-sa 3.0 with attribution required
rev 2016.4.29.3525