Sadly, I had to go nuclear and force a page reload after 50ms of a resize event firing. It seems to work well on page load, however, despite firing the function on page resize and the SVG width/height being correctly set in px, Safari only responds to the new size on a complete page reload. – If there is no viewbox or width and height, set both height and width attributes of the SVG to be the computed width – If there is no height or width defined on the SVG use the SVG viewbox width and height values to figure the proportional relationship between height and width and then from the computed width set the width and height attributed of the SVG accordingly However, for anyone still reading this, here is the basic logic of the JS: For example: tags but that’s of less interest (the comments in the JS should explain what’s going on). This is possible by using the SVGs inline within an object tag. It’s a work in progress but what’s important at this point is noting the beautiful crispness of the glyph illustrations, the space around them and the title text below. Go take a look in Chrome and you’ll see something like this: Īs a typography aficionado he’s looking to emphasise key glyphs in typefaces. My esteemed colleague Matthew Mitchell ( has been working on a personal project called Nice Letterform –.
This post details the problem and the solution. At the time of writing, Safari and some WebKit mobile browsers don’t. Chrome and Firefox render inline SVGs in responsive designs fine.
0 kommentar(er)
