Kyle Bavender kbav

Fix SVG in `<img>` tags not scaling in IE9, IE10, IE11

IE9, IE10, and IE11 don't properly scale SVG files added with img tags when viewBox, width and height attributes are specified. View this codepen on the different browsers.

Image heights will not scale when the images are inside containers narrower than image widths. This can be resolved in 2 ways.

Use `sed` in bash to remove width and height attributes in SVG files

As per this answer on Stackoverflow, the issue can be resolved by removing just the width and height attributes.

Make it useful

Install Package Control. For SublimeText 2, paste the following in Terminal:

import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

From here on out, use Package Control to install everything. ⌘+Shift+P, then type Install to get a list of installable packages you can 'livesearch through. After installing plugins, they should be running.

( Conversation started here, with @murtaugh and @zeldman. )

Ah man, I got Opinions™ on this. I ususally go with something like:

<aside>
  <h1>Optional Heading</h1>
  <blockquote>
  	<p>It is the unofficial force—the Baker Street irregulars.</p>
	</blockquote>

	var tabbableElements = 'a[href], area[href], input:not([disabled]),' +
	'select:not([disabled]), textarea:not([disabled]),' +
	'button:not([disabled]), iframe, object, embed, *[tabindex],' +
	'*[contenteditable]';

	var keepFocus = function (context) {
	var allTabbableElements = context.querySelectorAll(tabbableElements);
	var firstTabbableElement = allTabbableElements[0];
	var lastTabbableElement = allTabbableElements[allTabbableElements.length - 1];

	// ---------------------------------------------------------------------------------
	// CSS Image Paths
	// ---------------------------------------------------------------------------------
	$bg-img-path: '/path/to/images/'; // Base Path for BG Layout Images

	.wrapper
	.hovertext Hello World!
	.overlay
	img src="http://ansa.io/sketch.png"
	.mask-wrapper
	.rec1.rec
	.rec2.rec
	.rec3.rec

	jQuery(function($){

	var $flexslider = $('.flexslider'),
	$slides = $flexslider.find('li'),
	stripComment = function(string) {
	return string.replace(/<!--/g, '').replace(/-->/g, '');
	},
	initItem = function(item) {
	var $this = $(item);
	if(!$this.hasClass('init')) {

	/**
	* I converted the SCSS mixin to LESS for the awesome coders like myself in response to a blog post on 37Signals - http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss
	*
	* Update: 2014-08-04 - Updated a long-standing bug where retina images were shown no matter what in the first background-image property.
	* - Updated retina media query to be more reliable ()
	* Update: 2013-11-13 - Picked up another technique thanks to reading this post from Tyler Tate, auto-fill in the second filename for the retina image, http://tylertate.com/blog/2013/06/11/retina-images-using-media-queries-and-LESS-CSS.html
	* Update: 2013-04-16 - Have recently found a few use cases when using a retina pattern from Subtle Patterns on the <body>, this has come in handy
	* Update: 2013-04-05 - Some research in the Wordpress Core(http://core.trac.wordpress.org/ticket/22238#comment:5) was pointed out that some tests may be redundant (Thanks @kbav) so I've cleaned these up
	* Update: 2012-12-29 - U

	/**
	* CSS3 Isometric Text Demo v2
	*/

	@font-face {
	font-family: 'LeagueGothicRegular';
	src: url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/league_gothic-webfont.eot');
	src: url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/league_gothic-webfont.eot?iefix') format('eot'),
	url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/league_gothic-webfont.woff') format('woff'),
	url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/league_gothic-webfont.ttf') format('truetype'),

Kyle Bavender kbav

Fix SVG in <img> tags not scaling in IE9, IE10, IE11

Use sed in bash to remove width and height attributes in SVG files

Make it useful

Fix SVG in `<img>` tags not scaling in IE9, IE10, IE11

Use `sed` in bash to remove width and height attributes in SVG files