JH Tech Services

A knowledgebase

Inline SVG issues with iOS and IE

by

You probably know the drill. You find yourself working on a project with a deadline and the project is taking longer than expected. The client wants something done that you haven’t done before and it’s not working. So you go out and research and research and try so many different things. Now you want to write down the final solution and give credit to blog posts that pointed you in right directions but you’d have to search through you long browser history, and you realize that if you decide to do that, you would end up NOT writing anything…

I hadn’t added SVG to a page before. I know the basics of what it is and does, but just not the details.

I have a project and they have a hero banner that they want animated. There are some circles and text. At first, I thought about creating it using HTML markup and then animating with css, but I remembered the designer did this in Illustrator so why not have them export out the banner in SVG and then I can animate that with css.

It was easy to add it to the page. I simple cut and paste. For some reason the export split out the text into 2 to 6 character strings. I was able to combine these with no detriment to the final output. The page looked good on Chrome and Firefox, but on the iPad it had a bunch of space on the top and bottom. The solution was to add 


svg {
  height: 2%;
}

And I added the following in front of the svg tag:

(Keep reading though, because I eventually took out the height declaration)

Now it was fine. Next IE. Doooh! It would not fill the width of the container. Everything I read said IE had problems with this. I tried a few things. One article said I needed the

in the <head> but no help. Another had me add ‘preserveAspectRatio=”xMidYMin slice”‘ as an attribute to the svg tag. No help.

I found one solution that was putting the svg in a container with a height of 0 and a percentage padding-top. I tried this but maybe I didn’t see some of the other code that was needed because it didn’t work but it reminded me of another solution for adding video to a page and keeping the container at the right aspect ratio. A percentage for padding-top/bottom will add padding the size of the width times the percentage you added. My svg was 1500 x 295 and I wanted that to grow and shrink as necessary..that’s the whole point of svg anyway. So that percentage is 295/1500 = 19.67%. Now the container will be the correct height with a 100% width. The problem is that it’s the padding that is making it the right height since the content area of the box is 0. The solution is then to make the svg element positioned absolutely. You can use padding-top or padding-bottom. Here’s the full css


.svgContainerDiv {
    width: 100%;
    height: 0;
    padding-bottom: 19.6%;
    position: relative;
}

svg {
    position: absolute;
}

Once I did this I could take out the height: 2% I had for the svg element and the iOS devices worked fine as did IE, Chrome, Firefox, and Chrome on Android.

  • Knowledgebase