jruif · June 23, 2017 08:41 · Apr 22, 2016 · Aug 18, 2014 · Aug 18, 2014 · Jan 31, 2014
diff --git a/A.markdown b/A.markdown
@@ -34,17 +34,17 @@ The following will target all `img` tags containing an SVG file, in IE6+ (only I
  * [2] IE10+
  */
 /* 1 */
-.ie9 img[src*=".svg"] {
+.ie9 img[src$=".svg"] {
   width: 100%; 
 }
 /* 2 */
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  img[src*=".svg"] {
+  img[src$=".svg"] {
     width: 100%; 
   }
 }
 ```
 
 ### Caveats
 
-This targets every `img` tag containing ".svg" in IE9, IE10, and IE11 - if you do not want this behaviour on a particular image, you will have to add a class to override this behaviour for that image.
+This targets every `img` tag with a `src` that ends in ".svg" in IE9, IE10, and IE11 - if you do not want this behaviour on a particular image, you will have to add a class to override this behaviour for that image.
diff --git a/A.markdown b/A.markdown
@@ -34,8 +34,8 @@ The following will target all `img` tags containing an SVG file, in IE6+ (only I
  * [2] IE10+
  */
 /* 1 */
-img[src*=".svg"] {
-  width: 100%\9; 
+.ie9 img[src*=".svg"] {
+  width: 100%; 
 }
 /* 2 */
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

diff --git a/A.markdown b/A.markdown
@@ -38,7 +38,7 @@ img[src*=".svg"] {
   width: 100%\9; 
 }
 /* 2 */
-@media screen and (min-width:0\0) {
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   img[src*=".svg"] {
     width: 100%; 
   }

diff --git a/A.markdown b/A.markdown
@@ -27,8 +27,18 @@ Since the above solution requires CSS anyways, we might as well use a hack to ge
 The following will target all `img` tags containing an SVG file, in IE6+ (only IE9+ support SVG files, however).
 
 ```css
-/* will target Safari too */
-@media screen {@media (min-width:0px) {}
+/*
+ * Let's target IE to respect aspect ratios and sizes for img tags containing SVG files
+ *
+ * [1] IE9
+ * [2] IE10+
+ */
+/* 1 */
+img[src*=".svg"] {
+  width: 100%\9; 
+}
+/* 2 */
+@media screen and (min-width:0\0) {
   img[src*=".svg"] {
     width: 100%; 
   }

diff --git a/A.markdown b/A.markdown
@@ -27,8 +27,11 @@ Since the above solution requires CSS anyways, we might as well use a hack to ge
 The following will target all `img` tags containing an SVG file, in IE6+ (only IE9+ support SVG files, however).
 
 ```css
-img[src*=".svg"] {
-	width/*\**/: 100%\9;
+/* will target Safari too */
+@media screen {@media (min-width:0px) {}
+  img[src*=".svg"] {
+    width: 100%; 
+  }
 }
 ```
 

diff --git a/A.markdown b/A.markdown
@@ -34,4 +34,4 @@ img[src*=".svg"] {
 
 ### Caveats
 
-This targets every `img` with an SVG file in IE9, IE10, and IE11 - if you do not want this behaviour on a particular image, you will have to add a class to override this behaviour for that image.
+This targets every `img` tag containing ".svg" in IE9, IE10, and IE11 - if you do not want this behaviour on a particular image, you will have to add a class to override this behaviour for that image.
diff --git a/A.markdown b/A.markdown
@@ -27,7 +27,7 @@ Since the above solution requires CSS anyways, we might as well use a hack to ge
 The following will target all `img` tags containing an SVG file, in IE6+ (only IE9+ support SVG files, however).
 
 ```css
-img[src*=svg] {
+img[src*=".svg"] {
 	width/*\**/: 100%\9;
 }
 ```

diff --git a/A.markdown b/A.markdown
@@ -1,6 +1,6 @@
 # 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. 
+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](http://codepen.io/larrybotha/pen/hmlAs) 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.
 

diff --git a/A.markdown b/A.markdown
@@ -2,7 +2,7 @@
 
 IE9, IE10, and IE11 don't properly scale SVG files added with `img` tags when `viewBox`, `width` and `height` attributes are specified. 
 
-Image heights inside containers smaller than image width will not scale as the images become narrower. This can be resolved in 2 ways.
+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
 

diff --git a/A.markdown b/A.markdown
@@ -18,7 +18,7 @@ find ./ -name '*.svg' -print0 | xargs -0 sed -i "" -e 's/width="[0-9]*\.*\[0-9]*
 
 Removing width and height attributes will force the image to occupy the full width of its container in non-IE browsers.
 
-IE10 (other browsers require testing) will scale the images down to some arbitrary size - meaning you will need to add `width: 100%` to your CSS for those images to fir their containers.
+IE10 (other browsers require testing) will scale the images down to some arbitrary size - meaning you will need to add `width: 100%` to your CSS for those images to fit their containers.
 
 ## Target IE with CSS
 

diff --git a/A.markdown b/A.markdown
@@ -1,6 +1,6 @@
 # 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 both `viewBox` and `width` and `height` attributes are specified. 
+IE9, IE10, and IE11 don't properly scale SVG files added with `img` tags when `viewBox`, `width` and `height` attributes are specified. 
 
 Image heights inside containers smaller than image width will not scale as the images become narrower. This can be resolved in 2 ways.
 

diff --git a/A.markdown b/A.markdown
@@ -1,4 +1,4 @@
-# SVG in `<img>` tag not scaling in IE9, IE10, IE11
+# 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 both `viewBox` and `width` and `height` attributes are specified. 
 

diff --git a/A.markdown b/A.markdown
@@ -1,8 +1,12 @@
-# Use `sed` in bash to remove width and height attributes in SVG files
+# SVG in `<img>` tag not scaling in IE9, IE10, IE11
 
-IE9, IE10, and IE11 don't properly scale SVG files added with `img` tags when both `viewBox` and `width` and `height` attributes are specified.
+IE9, IE10, and IE11 don't properly scale SVG files added with `img` tags when both `viewBox` and `width` and `height` attributes are specified. 
 
-As per [this answer on Stackoverflow](http://stackoverflow.com/a/9792254/895007), the issue can be resolve by removing just the `width` and `height` attributes.
+Image heights inside containers smaller than image width will not scale as the images become narrower. 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](http://stackoverflow.com/a/9792254/895007), the issue can be resolved by removing just the `width` and `height` attributes.
 
 This little script will recursively search your current working directory for SVG files, and remove the attributes for cross browser compatibility:
 
@@ -12,6 +16,22 @@ find ./ -name '*.svg' -print0 | xargs -0 sed -i "" -e 's/width="[0-9]*\.*\[0-9]*
 
 ### Caveats
 
-Removing width and height attributes will force the image to occupy the full width of its container. 
+Removing width and height attributes will force the image to occupy the full width of its container in non-IE browsers.
+
+IE10 (other browsers require testing) will scale the images down to some arbitrary size - meaning you will need to add `width: 100%` to your CSS for those images to fir their containers.
+
+## Target IE with CSS
+
+Since the above solution requires CSS anyways, we might as well use a hack to get IE to behave, and not worry about having to manage every individual SVG file.
+
+The following will target all `img` tags containing an SVG file, in IE6+ (only IE9+ support SVG files, however).
+
+```css
+img[src*=svg] {
+	width/*\**/: 100%\9;
+}
+```
+
+### Caveats
 
-Another approach is to set the width of the images to 100% via CSS.
+This targets every `img` with an SVG file in IE9, IE10, and IE11 - if you do not want this behaviour on a particular image, you will have to add a class to override this behaviour for that image.
diff --git a/A.markdown b/A.markdown
@@ -8,4 +8,10 @@ This little script will recursively search your current working directory for SV
 
 ```bash
 find ./ -name '*.svg' -print0 | xargs -0 sed -i "" -e 's/width="[0-9]*\.*\[0-9]*" //' -e 's/height="[0-9]*\.*\[0-9]*" //'
-```
+```
+
+### Caveats
+
+Removing width and height attributes will force the image to occupy the full width of its container. 
+
+Another approach is to set the width of the images to 100% via CSS.
diff --git a/A.markdown b/A.markdown
@@ -7,5 +7,5 @@ As per [this answer on Stackoverflow](http://stackoverflow.com/a/9792254/895007)
 This little script will recursively search your current working directory for SVG files, and remove the attributes for cross browser compatibility:
 
 ```bash
-find ./ -name '*.svg' -print0 | xargs -0 sed -i "" -e 's/width="[0-9]*" //' -e 's/height="[0-9]*" //'
+find ./ -name '*.svg' -print0 | xargs -0 sed -i "" -e 's/width="[0-9]*\.*\[0-9]*" //' -e 's/height="[0-9]*\.*\[0-9]*" //'
 ```
diff --git a/A.markdown b/A.markdown
@@ -0,0 +1,11 @@
+# Use `sed` in bash to remove width and height attributes in SVG files
+
+IE9, IE10, and IE11 don't properly scale SVG files added with `img` tags when both `viewBox` and `width` and `height` attributes are specified.
+
+As per [this answer on Stackoverflow](http://stackoverflow.com/a/9792254/895007), the issue can be resolve by removing just the `width` and `height` attributes.
+
+This little script will recursively search your current working directory for SVG files, and remove the attributes for cross browser compatibility:
+
+```bash
+find ./ -name '*.svg' -print0 | xargs -0 sed -i "" -e 's/width="[0-9]*" //' -e 's/height="[0-9]*" //'
+```
No results found