SVG Support - Version 2.3.11

Version Description

  • New: Feature to use expanded JS file rather than the minified/compressed version (useful for bundling and minifying using external caching plugins).
  • New: Force Inline SVG option. This feature allows you to force all of your SVG files to be rendered inline regardless of classes applied. Addresses issues where you can't add your own class to an image for some reason. For example, some page builder image elements. Also addresses changing your target class in the settings and needing to change all of your already embedded media, allowing you to simply force render rather than update all of the classes.
  • Modified the readme file and descriptions a bit.
  • Refined some code in functions/featured-image.php line 69 to address a warning.
  • Updated "Requires at least" tag to 4.8 (though it should still work in older versions, there was issues with core during the 4.7 phase and it's time for you to update anyway).
Download this release

Release Info

Developer Benbodhi
Plugin Icon 128x128 SVG Support
Version 2.3.11
Comparing to
See all releases

Code changes from version 2.3.10 to 2.3.11

Files changed (9) hide show
  1. admin/admin-init.php +1 -2
  2. admin/svgs-settings-page.php +34 -1
  3. config.codekit3 +39 -1
  4. functions/enqueue.php +66 -6
  5. functions/featured-image.php +1 -1
  6. js/min/svgs-inline-min.js +1 -1
  7. js/svgs-inline.js +30 -1
  8. readme.txt +23 -14
  9. svg-support.php +3 -3
admin/admin-init.php CHANGED
@@ -11,7 +11,7 @@ if ( ! defined( 'ABSPATH' ) ) {
11
  */
12
  function bodhi_svgs_admin_menu() {
13
 
14
- add_options_page(
15
  __('SVG Support Settings and Usage', 'svg-support'),
16
  __('SVG Support', 'svg-support'),
17
  'manage_options',
@@ -83,7 +83,6 @@ function bodhi_svgs_specific_pages_settings() {
83
  $screen = get_current_screen();
84
 
85
  // check if we're on SVG Support settings page
86
-
87
  if ( is_object($screen) && $screen->id == 'settings_page_svg-support' ) {
88
 
89
  return true;
11
  */
12
  function bodhi_svgs_admin_menu() {
13
 
14
+ $bodhi_svgs_options_page = add_options_page(
15
  __('SVG Support Settings and Usage', 'svg-support'),
16
  __('SVG Support', 'svg-support'),
17
  'manage_options',
83
  $screen = get_current_screen();
84
 
85
  // check if we're on SVG Support settings page
 
86
  if ( is_object($screen) && $screen->id == 'settings_page_svg-support' ) {
87
 
88
  return true;
admin/svgs-settings-page.php CHANGED
@@ -78,7 +78,19 @@
78
  </tr>
79
 
80
  <tr valign="top" class="svgs-advanced">
81
- <!-- Automatically insert class to target in images when inserting into posts/pages -->
 
 
 
 
 
 
 
 
 
 
 
 
82
  <th scope="row">
83
  <label for="bodhi_svgs_settings[auto_insert_class]"><strong><?php _e( 'Automatically insert class?', 'svg-support' ); ?></strong></label>
84
  </th>
@@ -99,6 +111,18 @@
99
  </td>
100
  </tr>
101
 
 
 
 
 
 
 
 
 
 
 
 
 
102
  </table>
103
 
104
  <p>
@@ -161,6 +185,14 @@
161
  </div> <!-- .inside -->
162
  </div> <!-- .postbox -->
163
 
 
 
 
 
 
 
 
 
164
  </div> <!-- .meta-box-sortables .ui-sortable -->
165
 
166
  </div> <!-- post-body-content -->
@@ -192,6 +224,7 @@
192
  <li><?php _e( 'Include multiple URL\'s inside single SVG', 'svg-support' ); ?></li>
193
  <li><?php _e( 'Use odd shapes as links', 'svg-support' ); ?></li>
194
  <li><?php _e( 'Inline SVG featured image support', 'svg-support' ); ?></li>
 
195
  </ul>
196
  </div> <!-- .inside -->
197
  </div> <!-- .postbox -->
78
  </tr>
79
 
80
  <tr valign="top" class="svgs-advanced">
81
+ <!-- Select whether to use minified or expanded JS file -->
82
+ <th scope="row">
83
+ <label for="bodhi_svgs_settings[use_expanded_js]"><strong><?php _e( 'Use Expanded JS?', 'svg-support' ); ?></strong></label>
84
+ </th>
85
+ <td>
86
+ <?php printf(
87
+ '<input id="bodhi_svgs_settings[use_expanded_js]" name="bodhi_svgs_settings[use_expanded_js]" type="checkbox" %2$s />', 'bodhi_svgs_settings_use_expanded_js', checked( isset( $bodhi_svgs_options['use_expanded_js'] ), true, false ) ); ?>
88
+ <?php _e( 'Yes', 'svg-support' ); ?><br /><small class="description"><?php _e(' Checking this will use the expanded JS file instead of the minified JS file. Useful if you want to minify this externally using a caching plugin or similar.', 'svg-support' ); ?></small>
89
+ </td>
90
+ </tr>
91
+
92
+ <tr valign="top" class="svgs-advanced">
93
+ <!-- Automatically insert class to target in images when inserting into posts/pages from admin edit screen -->
94
  <th scope="row">
95
  <label for="bodhi_svgs_settings[auto_insert_class]"><strong><?php _e( 'Automatically insert class?', 'svg-support' ); ?></strong></label>
96
  </th>
111
  </td>
112
  </tr>
113
 
114
+ <tr valign="top" class="svgs-advanced">
115
+ <!-- Automatically insert class to target in images on front end page via jQuery -->
116
+ <th scope="row">
117
+ <label for="bodhi_svgs_settings[force_inline_svg]"><strong><?php _e( 'Force Inline SVG?', 'svg-support' ); ?></strong></label>
118
+ </th>
119
+ <td>
120
+ <?php printf(
121
+ '<input id="bodhi_svgs_settings[force_inline_svg]" name="bodhi_svgs_settings[force_inline_svg]" type="checkbox" %2$s />', 'bodhi_svgs_settings_force_inline_svg', checked( isset( $bodhi_svgs_options['force_inline_svg'] ), true, false ) ); ?>
122
+ <?php _e( 'Yes', 'svg-support' ); ?><br /><small class="description"><?php _e(' <strong>Use with caution!</strong> Checking this will automatically add the SVG class to ALL image tags containing SVG file sources in the rendered HTML via javascript and will therefore render all of your SVG files inline.<br /><em>Use case scenario: When using a visual builder such as in the Divi Theme or The Divi Builder, the class is not automatically added with the "Automatically insert class?" option selected or the builder module doesn\'t give you the option to manually add a CSS class directly to your image.</em>', 'svg-support' ); ?></small>
123
+ </td>
124
+ </tr>
125
+
126
  </table>
127
 
128
  <p>
185
  </div> <!-- .inside -->
186
  </div> <!-- .postbox -->
187
 
188
+ <div class="postbox">
189
+ <h3><span><?php _e( 'Animate and Optimize your SVG files using these open source projects', 'svg-support' ); ?></span></h3>
190
+ <div class="inside">
191
+ <p><a href="https://maxwellito.github.io/vivus-instant/" target="_blank">Vivus Instant for SVG animation</a> <?php _e( 'Upload your SVG files and use the tools provided to animate strokes.', 'svg-support' ); ?></p>
192
+ <p><a href="https://jakearchibald.github.io/svgomg/" target="_blank">SVGOMG for SVG optimisation</a> <?php _e( 'An online tool to optimize your SVG files.', 'svg-support' ); ?></p>
193
+ </div> <!-- .inside -->
194
+ </div> <!-- .postbox -->
195
+
196
  </div> <!-- .meta-box-sortables .ui-sortable -->
197
 
198
  </div> <!-- post-body-content -->
224
  <li><?php _e( 'Include multiple URL\'s inside single SVG', 'svg-support' ); ?></li>
225
  <li><?php _e( 'Use odd shapes as links', 'svg-support' ); ?></li>
226
  <li><?php _e( 'Inline SVG featured image support', 'svg-support' ); ?></li>
227
+ <li><?php _e( 'Force all SVG files to be rendered inline', 'svg-support' ); ?></li>
228
  </ul>
229
  </div> <!-- .inside -->
230
  </div> <!-- .postbox -->
config.codekit3 CHANGED
@@ -7,7 +7,7 @@
7
  "uuidString": "FDF09C14-788E-4A4D-A218-DA6A56580A0D"
8
  }
9
  ],
10
- "creatorBuild": "25813",
11
  "files": {
12
  "\/admin\/admin-init.php": {
13
  "ft": 8192,
@@ -128,6 +128,7 @@
128
  },
129
  "\/js\/min\/svgs-admin-notice-update-min.js": {
130
  "ft": 64,
 
131
  "mi": 1,
132
  "oA": 0,
133
  "oAP": "\/js\/min\/svgs-admin-notice-update-min-min.js",
@@ -137,6 +138,7 @@
137
  },
138
  "\/js\/min\/svgs-inline-min.js": {
139
  "ft": 64,
 
140
  "mi": 1,
141
  "oA": 0,
142
  "oAP": "\/js\/min\/svgs-inline-min-min.js",
@@ -146,6 +148,7 @@
146
  },
147
  "\/js\/svgs-admin-notice-update.js": {
148
  "ft": 64,
 
149
  "mi": 1,
150
  "oA": 0,
151
  "oAP": "\/js\/min\/svgs-admin-notice-update-min.js",
@@ -155,6 +158,7 @@
155
  },
156
  "\/js\/svgs-inline.js": {
157
  "ft": 64,
 
158
  "mi": 1,
159
  "oA": 0,
160
  "oAP": "\/js\/min\/svgs-inline-min.js",
@@ -669,6 +673,10 @@
669
  "active": 0,
670
  "optionString": "{'setWithoutGet': true, 'getWithoutSet': false}"
671
  },
 
 
 
 
672
  "array-bracket-spacing": {
673
  "active": 0,
674
  "optionString": "'never', {'singleValue': false, 'objectsInArrays': false, 'arraysInArrays': false}"
@@ -677,6 +685,10 @@
677
  "active": 0,
678
  "optionString": ""
679
  },
 
 
 
 
680
  "arrow-body-style": {
681
  "active": 0,
682
  "optionString": "'as-needed', {'requireReturnForObjectLiteral': false}"
@@ -773,6 +785,10 @@
773
  "active": 0,
774
  "optionString": "'always', {'null': 'always'}"
775
  },
 
 
 
 
776
  "func-call-spacing": {
777
  "active": 0,
778
  "optionString": "'never'"
@@ -793,6 +809,10 @@
793
  "active": 0,
794
  "optionString": "{'before': true, 'after': false}"
795
  },
 
 
 
 
796
  "global-require": {
797
  "active": 0,
798
  "optionString": ""
@@ -921,6 +941,10 @@
921
  "active": 0,
922
  "optionString": "{'allow': ['~'], 'int32Hint': true}"
923
  },
 
 
 
 
924
  "no-caller": {
925
  "active": 0,
926
  "optionString": ""
@@ -1465,6 +1489,10 @@
1465
  "active": 0,
1466
  "optionString": "{'blocks': 'always', 'switches': 'always', 'classes': 'always'}"
1467
  },
 
 
 
 
1468
  "prefer-arrow-callback": {
1469
  "active": 0,
1470
  "optionString": ""
@@ -1533,6 +1561,10 @@
1533
  "active": 0,
1534
  "optionString": "{'before': false, 'after': true}"
1535
  },
 
 
 
 
1536
  "sort-imports": {
1537
  "active": 0,
1538
  "optionString": "{'ignoreCase': false, 'ignoreMemberSort': true, 'memberSyntaxSortOrder': ['none', 'all', 'multiple', 'single']}"
@@ -1573,6 +1605,10 @@
1573
  "active": 0,
1574
  "optionString": "'safe'"
1575
  },
 
 
 
 
1576
  "symbol-description": {
1577
  "active": 0,
1578
  "optionString": ""
@@ -2201,9 +2237,11 @@
2201
  },
2202
  "languageDefaultsUserDefined": [
2203
  ],
 
2204
  "previewPathAddition": "",
2205
  "skippedFoldersString": "log, _logs, logs, _cache, cache, \/storage\/framework\/sessions, node_modules",
2206
  "sourceFolderName": "source",
 
2207
  "uglifyDefinesString": "",
2208
  "uglifyFlags2": {
2209
  "ascii-only": {
7
  "uuidString": "FDF09C14-788E-4A4D-A218-DA6A56580A0D"
8
  }
9
  ],
10
+ "creatorBuild": "25900",
11
  "files": {
12
  "\/admin\/admin-init.php": {
13
  "ft": 8192,
128
  },
129
  "\/js\/min\/svgs-admin-notice-update-min.js": {
130
  "ft": 64,
131
+ "ma": 0,
132
  "mi": 1,
133
  "oA": 0,
134
  "oAP": "\/js\/min\/svgs-admin-notice-update-min-min.js",
138
  },
139
  "\/js\/min\/svgs-inline-min.js": {
140
  "ft": 64,
141
+ "ma": 0,
142
  "mi": 1,
143
  "oA": 0,
144
  "oAP": "\/js\/min\/svgs-inline-min-min.js",
148
  },
149
  "\/js\/svgs-admin-notice-update.js": {
150
  "ft": 64,
151
+ "ma": 0,
152
  "mi": 1,
153
  "oA": 0,
154
  "oAP": "\/js\/min\/svgs-admin-notice-update-min.js",
158
  },
159
  "\/js\/svgs-inline.js": {
160
  "ft": 64,
161
+ "ma": 0,
162
  "mi": 1,
163
  "oA": 0,
164
  "oAP": "\/js\/min\/svgs-inline-min.js",
673
  "active": 0,
674
  "optionString": "{'setWithoutGet': true, 'getWithoutSet': false}"
675
  },
676
+ "array-bracket-newline": {
677
+ "active": 0,
678
+ "optionString": "{'multiline': true, 'minItems': null}"
679
+ },
680
  "array-bracket-spacing": {
681
  "active": 0,
682
  "optionString": "'never', {'singleValue': false, 'objectsInArrays': false, 'arraysInArrays': false}"
685
  "active": 0,
686
  "optionString": ""
687
  },
688
+ "array-element-newline": {
689
+ "active": 0,
690
+ "optionString": "'always'"
691
+ },
692
  "arrow-body-style": {
693
  "active": 0,
694
  "optionString": "'as-needed', {'requireReturnForObjectLiteral': false}"
785
  "active": 0,
786
  "optionString": "'always', {'null': 'always'}"
787
  },
788
+ "for-direction": {
789
+ "active": 0,
790
+ "optionString": ""
791
+ },
792
  "func-call-spacing": {
793
  "active": 0,
794
  "optionString": "'never'"
809
  "active": 0,
810
  "optionString": "{'before': true, 'after': false}"
811
  },
812
+ "getter-return": {
813
+ "active": 0,
814
+ "optionString": "{'allowImplicit': false}"
815
+ },
816
  "global-require": {
817
  "active": 0,
818
  "optionString": ""
941
  "active": 0,
942
  "optionString": "{'allow': ['~'], 'int32Hint': true}"
943
  },
944
+ "no-buffer-constructor": {
945
+ "active": 0,
946
+ "optionString": ""
947
+ },
948
  "no-caller": {
949
  "active": 0,
950
  "optionString": ""
1489
  "active": 0,
1490
  "optionString": "{'blocks': 'always', 'switches': 'always', 'classes': 'always'}"
1491
  },
1492
+ "padding-line-between-statements": {
1493
+ "active": 0,
1494
+ "optionString": "{blankLine: 'always', prev:'*', next:'return'}"
1495
+ },
1496
  "prefer-arrow-callback": {
1497
  "active": 0,
1498
  "optionString": ""
1561
  "active": 0,
1562
  "optionString": "{'before': false, 'after': true}"
1563
  },
1564
+ "semi-style": {
1565
+ "active": 0,
1566
+ "optionString": "'last'"
1567
+ },
1568
  "sort-imports": {
1569
  "active": 0,
1570
  "optionString": "{'ignoreCase': false, 'ignoreMemberSort': true, 'memberSyntaxSortOrder': ['none', 'all', 'multiple', 'single']}"
1605
  "active": 0,
1606
  "optionString": "'safe'"
1607
  },
1608
+ "switch-colon-spacing": {
1609
+ "active": 0,
1610
+ "optionString": "{'after': true, 'before': false}"
1611
+ },
1612
  "symbol-description": {
1613
  "active": 0,
1614
  "optionString": ""
2237
  },
2238
  "languageDefaultsUserDefined": [
2239
  ],
2240
+ "overrideExternalServerCSS": 0,
2241
  "previewPathAddition": "",
2242
  "skippedFoldersString": "log, _logs, logs, _cache, cache, \/storage\/framework\/sessions, node_modules",
2243
  "sourceFolderName": "source",
2244
+ "susyVersion": 3,
2245
  "uglifyDefinesString": "",
2246
  "uglifyFlags2": {
2247
  "ascii-only": {
functions/enqueue.php CHANGED
@@ -62,22 +62,82 @@ function bodhi_svgs_inline() {
62
  // get the settings
63
  global $bodhi_svgs_options;
64
 
65
- // set the custom class for use in JS
66
- $css_target = 'img.'. $bodhi_svgs_options['css_target'];
67
 
68
- // check where the JS should be placed
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
69
  if ( ! empty( $bodhi_svgs_options['js_foot_choice'] ) ) {
70
 
71
- wp_register_script( 'bodhi_svg_inline', BODHI_SVGS_PLUGIN_URL . 'js/min/svgs-inline-min.js', array( 'jquery' ), '1.0.0', true );
72
 
73
  } else {
74
 
75
- wp_register_script( 'bodhi_svg_inline', BODHI_SVGS_PLUGIN_URL . 'js/min/svgs-inline-min.js', array( 'jquery' ), '1.0.0', false );
76
 
77
  }
78
 
 
 
 
 
79
  wp_enqueue_script( 'bodhi_svg_inline' );
80
- wp_localize_script( 'bodhi_svg_inline', 'cssTarget', $css_target );
 
 
81
 
82
  }
83
 
62
  // get the settings
63
  global $bodhi_svgs_options;
64
 
65
+ // check if force inline svg is active
66
+ if ( ! empty( $bodhi_svgs_options['force_inline_svg'] ) ) {
67
 
68
+ // set variable as true to pass to js
69
+ $force_inline_svg_active = 'true';
70
+
71
+ // set the class for use in JS
72
+ if ( ! empty( $bodhi_svgs_options['css_target'] ) ) {
73
+
74
+ // use custom class if set
75
+ $css_target_array = array(
76
+ 'Bodhi' => 'img.'. $bodhi_svgs_options['css_target'],
77
+ 'ForceInlineSVG' => $bodhi_svgs_options['css_target']
78
+ );
79
+
80
+ } else {
81
+
82
+ // set default class
83
+ $css_target_array = array(
84
+ 'Bodhi' => 'img.style-svg',
85
+ 'ForceInlineSVG' => 'style-svg'
86
+ );
87
+
88
+ }
89
+
90
+ } else {
91
+
92
+ // set variable as false to pass to JS
93
+ $force_inline_svg_active = 'false';
94
+
95
+ // if custom target is set, use that, otherwise use default
96
+ if ( ! empty( $bodhi_svgs_options['css_target'] ) ) {
97
+ $css_target = 'img.'. $bodhi_svgs_options['css_target'];
98
+ } else {
99
+ $css_target = 'img.style-svg';
100
+ }
101
+
102
+ // set the array to target for passing to JS
103
+ $css_target_array = $css_target;
104
+
105
+ }
106
+
107
+ // use expanded or minified JS
108
+ if ( ! empty( $bodhi_svgs_options['use_expanded_js'] ) ) {
109
+
110
+ // set variables to blank so we use the full JS version
111
+ $bodhi_svgs_js_folder = '';
112
+ $bodhi_svgs_js_file = '';
113
+
114
+ } else {
115
+
116
+ // set variables to the minified version in the min folder
117
+ $bodhi_svgs_js_folder = 'min/'; // min folder
118
+ $bodhi_svgs_js_file = '-min'; // min file
119
+
120
+ }
121
+
122
+ // check where the JS should be placed, header or footer
123
  if ( ! empty( $bodhi_svgs_options['js_foot_choice'] ) ) {
124
 
125
+ $bodhi_svgs_js_footer = true;
126
 
127
  } else {
128
 
129
+ $bodhi_svgs_js_footer = false;
130
 
131
  }
132
 
133
+ // create path for the correct js file
134
+ $bodhi_svgs_js_path = 'js/' . $bodhi_svgs_js_folder .'svgs-inline' . $bodhi_svgs_js_file . '.js' ;
135
+
136
+ wp_register_script( 'bodhi_svg_inline', BODHI_SVGS_PLUGIN_URL . $bodhi_svgs_js_path, array( 'jquery' ), '1.0.0', $bodhi_svgs_js_footer );
137
  wp_enqueue_script( 'bodhi_svg_inline' );
138
+
139
+ wp_localize_script( 'bodhi_svg_inline', 'cssTarget', $css_target_array );
140
+ wp_localize_script( 'bodhi_svg_inline', 'ForceInlineSVGActive', $force_inline_svg_active );
141
 
142
  }
143
 
functions/featured-image.php CHANGED
@@ -66,7 +66,7 @@ function bodhi_svgs_add_class_to_thumbnail( $thumb ) {
66
 
67
  $inline_featured_image = get_post_meta( get_the_ID(), 'inline_featured_image' );
68
 
69
- if ( in_array( 1, $inline_featured_image ) ) {
70
 
71
  global $bodhi_svgs_options;
72
 
66
 
67
  $inline_featured_image = get_post_meta( get_the_ID(), 'inline_featured_image' );
68
 
69
+ if ( is_array( $inline_featured_image ) && in_array( 1, $inline_featured_image ) ) {
70
 
71
  global $bodhi_svgs_options;
72
 
js/min/svgs-inline-min.js CHANGED
@@ -1 +1 @@
1
- jQuery(document).ready(function($){String.prototype.endsWith||(String.prototype.endsWith=function(t,e){var r=this.toString();("number"!=typeof e||!isFinite(e)||Math.floor(e)!==e||e>r.length)&&(e=r.length),e-=t.length;var n=r.lastIndexOf(t,e);return n!==-1&&n===e}),String.prototype.endsWith=function(t){var e=this.length-t.length;return e>=0&&this.lastIndexOf(t)===e},$("img."!==cssTarget?cssTarget:"img.style-svg").each(function(t){var e=jQuery(this),r=e.attr("id"),n=e.attr("class"),i=e.attr("src");i.endsWith("svg")&&$.get(i,function(i){var s=$(i).find("svg"),a=s.attr("id");void 0===r?void 0===a?(r="svg-replaced-"+t,s=s.attr("id",r)):r=a:s=s.attr("id",r),void 0!==n&&(s=s.attr("class",n+" replaced-svg svg-replaced-"+t)),s=s.removeAttr("xmlns:a"),e.replaceWith(s),$(document).trigger("svg.loaded",[r])},"xml")})});
1
+ jQuery(document).ready(function($){if("true"===ForceInlineSVGActive&&jQuery("img").each(function(){jQuery(this).attr("src").match(/\.(svg)/)&&(jQuery(this).hasClass(cssTarget.ForceInlineSVG)||jQuery(this).addClass(cssTarget.ForceInlineSVG))}),String.prototype.endsWith||(String.prototype.endsWith=function(t,e){var r=this.toString();("number"!=typeof e||!isFinite(e)||Math.floor(e)!==e||e>r.length)&&(e=r.length),e-=t.length;var s=r.lastIndexOf(t,e);return-1!==s&&s===e}),String.prototype.endsWith=function(t){var e=this.length-t.length;return e>=0&&this.lastIndexOf(t)===e},"true"===ForceInlineSVGActive)var t="img."!==cssTarget.Bodhi?cssTarget.Bodhi:"img.style-svg";else var t="img."!==cssTarget?cssTarget:"img.style-svg";$(t).each(function(t){var e=jQuery(this),r=e.attr("id"),s=e.attr("class"),i=e.attr("src");i.endsWith("svg")&&$.get(i,function(i){var n=$(i).find("svg"),a=n.attr("id");void 0===r?void 0===a?(r="svg-replaced-"+t,n=n.attr("id",r)):r=a:n=n.attr("id",r),void 0!==s&&(n=n.attr("class",s+" replaced-svg svg-replaced-"+t)),n=n.removeAttr("xmlns:a"),e.replaceWith(n),$(document).trigger("svg.loaded",[r])},"xml")})});
js/svgs-inline.js CHANGED
@@ -1,5 +1,22 @@
1
  jQuery(document).ready(function ($) {
2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3
  // Polyfill to support all ye old browsers
4
  // delete when not needed in the future
5
  if (!String.prototype.endsWith) {
@@ -22,7 +39,11 @@ jQuery(document).ready(function ($) {
22
  // End snippet to support IE11
23
 
24
  // Check to see if user set alternate class
25
- var target = ( cssTarget !== 'img.' ? cssTarget : 'img.style-svg' );
 
 
 
 
26
 
27
  $(target).each(function(index){
28
  var $img = jQuery(this);
@@ -30,6 +51,10 @@ jQuery(document).ready(function ($) {
30
  var imgClass = $img.attr('class');
31
  var imgURL = $img.attr('src');
32
 
 
 
 
 
33
  if (!imgURL.endsWith('svg')) {
34
  return;
35
  }
@@ -61,6 +86,10 @@ jQuery(document).ready(function ($) {
61
  // Remove any invalid XML tags as per http://validator.w3.org
62
  $svg = $svg.removeAttr('xmlns:a');
63
 
 
 
 
 
64
  // Replace image with new SVG
65
  $img.replaceWith($svg);
66
 
1
  jQuery(document).ready(function ($) {
2
 
3
+ // If force inline SVG option is active then add class
4
+ if ( ForceInlineSVGActive === 'true' ) {
5
+
6
+ // Find all SVG inside img and add class if it hasn't got it
7
+ jQuery('img').each(function() {
8
+
9
+ // Pick only those with the extension we want
10
+ if ( jQuery(this).attr('src').match(/\.(svg)/) ) {
11
+
12
+ // Add our class name
13
+ if ( !jQuery(this).hasClass(cssTarget.ForceInlineSVG) ) {
14
+ jQuery(this).addClass(cssTarget.ForceInlineSVG);
15
+ }
16
+ }
17
+ });
18
+ }
19
+
20
  // Polyfill to support all ye old browsers
21
  // delete when not needed in the future
22
  if (!String.prototype.endsWith) {
39
  // End snippet to support IE11
40
 
41
  // Check to see if user set alternate class
42
+ if ( ForceInlineSVGActive === 'true' ) {
43
+ var target = ( cssTarget.Bodhi !== 'img.' ? cssTarget.Bodhi : 'img.style-svg' );
44
+ } else {
45
+ var target = ( cssTarget !== 'img.' ? cssTarget : 'img.style-svg' );
46
+ }
47
 
48
  $(target).each(function(index){
49
  var $img = jQuery(this);
51
  var imgClass = $img.attr('class');
52
  var imgURL = $img.attr('src');
53
 
54
+ // Set svg size to the original img size
55
+ // var imgWidth = $img.attr('width');
56
+ // var imgHeight = $img.attr('height');
57
+
58
  if (!imgURL.endsWith('svg')) {
59
  return;
60
  }
86
  // Remove any invalid XML tags as per http://validator.w3.org
87
  $svg = $svg.removeAttr('xmlns:a');
88
 
89
+ // Add size attributes
90
+ // $svg = $svg.attr('width', imgWidth);
91
+ // $svg = $svg.attr('height', imgHeight);
92
+
93
  // Replace image with new SVG
94
  $img.replaceWith($svg);
95
 
readme.txt CHANGED
@@ -2,13 +2,13 @@
2
  Contributors: Benbodhi
3
  Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=Z9R7JERS82EQQ
4
  Tags: svg, vector, css, style, mime, mime type, embed, img, inline, animation, animate, js
5
- Requires at least: 4.0
6
- Tested up to: 4.8
7
- Stable tag: 2.3.10
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
11
- Allow SVG file uploads using the WordPress Media Library uploader plus direct styling/animation of SVG elements using CSS/JS.
12
 
13
  == Description ==
14
 
@@ -55,17 +55,18 @@ or
55
  `<img class="your-custom-class" alt="alt-text" src="image-source.svg" />`
56
 
57
  The whole IMG tag element will now be dynamically replaced by the actual code of your SVG, making the inner content targetable.<br />
58
- This allows you to target elements within your SVG using CSS.
59
 
60
  You can remove all other attributes from the IMG tag as it will disappear anyway.
61
 
62
  There’s a setting to automatically add your class to the IMG tag for you when you're inserting SVG’s in to a post or page, which also removes unnecessary tags.
 
63
 
64
  *Featured Images:* If a post/page is saved with your SVG as a featured image, a checkbox will display in the featured image meta box to allow you to render it inline (only if advanced mode is active).
65
 
66
  Please Note: If your SVG isn’t showing, it’s likely that it is being displayed with 0 height and width. In this case, you will need to set your own height and width in your CSS for SVG files to display correctly.
67
 
68
- *If you are having any issues, please use the support tab and I will try my best to get back to you quickly*
69
 
70
  == Security ==
71
 
@@ -73,12 +74,12 @@ As with allowing uploads of any files, there is potential risks involved. Only a
73
 
74
  == Feedback ==
75
 
76
- * I am open to your [suggestions and feedback](mailto:wp@benbodhi.com) - Thanks for using SVG Support!
77
  * Tag me [@benbodhi](https://twitter.com/benbodhi) or [@GoWebben](https://twitter.com/gowebben) on Twitter
78
  * Like & Follow [my Facebook page](https://www.facebook.com/gowebben)
79
  * Or circle [+GoWebben](https://plus.google.com/+Gowebben/) on Google Plus ;-)
80
 
81
- *Note:* This is the second plugin on the WordPress repository, I hope you like it. Please take a moment to rate it and click 'works' under compatibility with your version of WordPress.
82
 
83
  == Translations ==
84
 
@@ -88,17 +89,13 @@ New to Translating WordPress? Read through the [Translator Handbook](https://mak
88
  == Additional Info ==
89
  **Idea Behind / Philosophy:** I needed an easy way to include SVG support in sites instead of having to copy and paste the code for each one. I also needed the ability to make odd shaped image links which SVG allows by embedding the links in the SVG file directly. I found a [really cool snippet](http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement) of jQuery written by Drew Baker a while ago and have used it (modified for WordPress) a few times until I was inspired to build it all into a plugin for ease of use and to share with others. Now styling SVG elements is super easy :)
90
 
91
- == Future Features ==
92
- * Option to choose which user ID can access the settings
93
- * Option to choose specific user ID's for usage restriction (both helpful if you have multiple administrators)
94
- * Built in SVG animation editor
95
-
96
  Again, feel free to [shoot me suggestions](mailto:wp@benbodhi.com)
97
 
98
  == Credits ==
99
  Plugin by [Benbodhi](https://benbodhi.com/) [@benbodhi](https://twitter.com/benbodhi) from [GoWebben](http://gowebben.com/) [@GoWebben](https://twitter.com/gowebben)
100
 
101
- Thanks to [laurosello](https://wordpress.org/support/profile/laurosollero) for his code contribution in svg-inline.php.
 
102
  Logo By W3C, CC BY 2.5, [https://commons.wikimedia.org/w/index.php?curid=1895005](https://commons.wikimedia.org/w/index.php?curid=1895005).
103
 
104
  == Frequently Asked Questions ==
@@ -163,6 +160,14 @@ or
163
 
164
  == Changelog ==
165
 
 
 
 
 
 
 
 
 
166
  = 2.3.10 =
167
 
168
  * Fixed missing links in settings page.
@@ -327,6 +332,10 @@ or
327
 
328
  == Upgrade Notice ==
329
 
 
 
 
 
330
  = 2.3.10 =
331
 
332
  * Fixed missing links in settings page.
2
  Contributors: Benbodhi
3
  Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=Z9R7JERS82EQQ
4
  Tags: svg, vector, css, style, mime, mime type, embed, img, inline, animation, animate, js
5
+ Requires at least: 4.8
6
+ Tested up to: 4.9-alpha-41335
7
+ Stable tag: 2.3.11
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
11
+ Allow SVG file uploads using the WordPress Media Library uploader plus the ability to inline SVG files for direct styling/animation of SVG elements using CSS/JS.
12
 
13
  == Description ==
14
 
55
  `<img class="your-custom-class" alt="alt-text" src="image-source.svg" />`
56
 
57
  The whole IMG tag element will now be dynamically replaced by the actual code of your SVG, making the inner content targetable.<br />
58
+ This allows you to target elements within your SVG using CSS and JS.
59
 
60
  You can remove all other attributes from the IMG tag as it will disappear anyway.
61
 
62
  There’s a setting to automatically add your class to the IMG tag for you when you're inserting SVG’s in to a post or page, which also removes unnecessary tags.
63
+ Since 2.3.11, you can force all SVG files to be rendered inline with a single checkbox. Additionally, you can now choose whether to use the minified or expanded version of the JS file.
64
 
65
  *Featured Images:* If a post/page is saved with your SVG as a featured image, a checkbox will display in the featured image meta box to allow you to render it inline (only if advanced mode is active).
66
 
67
  Please Note: If your SVG isn’t showing, it’s likely that it is being displayed with 0 height and width. In this case, you will need to set your own height and width in your CSS for SVG files to display correctly.
68
 
69
+ *If you're having any issues, please use the support tab and I will try my best to get back to you quickly*
70
 
71
  == Security ==
72
 
74
 
75
  == Feedback ==
76
 
77
+ * I'm open to your [suggestions and feedback](mailto:wp@benbodhi.com) - Thanks for using SVG Support!
78
  * Tag me [@benbodhi](https://twitter.com/benbodhi) or [@GoWebben](https://twitter.com/gowebben) on Twitter
79
  * Like & Follow [my Facebook page](https://www.facebook.com/gowebben)
80
  * Or circle [+GoWebben](https://plus.google.com/+Gowebben/) on Google Plus ;-)
81
 
82
+ *Note:* This is my second plugin on the WordPress repository, I hope you like it. Please take a moment to rate it and click 'works' under compatibility with your version of WordPress.
83
 
84
  == Translations ==
85
 
89
  == Additional Info ==
90
  **Idea Behind / Philosophy:** I needed an easy way to include SVG support in sites instead of having to copy and paste the code for each one. I also needed the ability to make odd shaped image links which SVG allows by embedding the links in the SVG file directly. I found a [really cool snippet](http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement) of jQuery written by Drew Baker a while ago and have used it (modified for WordPress) a few times until I was inspired to build it all into a plugin for ease of use and to share with others. Now styling SVG elements is super easy :)
91
 
 
 
 
 
 
92
  Again, feel free to [shoot me suggestions](mailto:wp@benbodhi.com)
93
 
94
  == Credits ==
95
  Plugin by [Benbodhi](https://benbodhi.com/) [@benbodhi](https://twitter.com/benbodhi) from [GoWebben](http://gowebben.com/) [@GoWebben](https://twitter.com/gowebben)
96
 
97
+ Thanks to [ipokkel](https://wordpress.org/support/users/ipokkel/) for his suggestions and code contributions.
98
+ Thanks to [laurosello](https://wordpress.org/support/users/laurosollero) for his code contribution.
99
  Logo By W3C, CC BY 2.5, [https://commons.wikimedia.org/w/index.php?curid=1895005](https://commons.wikimedia.org/w/index.php?curid=1895005).
100
 
101
  == Frequently Asked Questions ==
160
 
161
  == Changelog ==
162
 
163
+ = 2.3.11 =
164
+
165
+ * New: Feature to use expanded JS file rather than the minified/compressed version (useful for bundling and minifying using external caching plugins).
166
+ * New: Force Inline SVG option. This feature allows you to force all of your SVG files to be rendered inline regardless of classes applied. Addresses issues where you can't add your own class to an image for some reason. For example, some page builder image elements. Also addresses changing your target class in the settings and needing to change all of your already embedded media, allowing you to simply force render rather than update all of the classes.
167
+ * Modified the readme file and descriptions a bit.
168
+ * Refined some code in functions/featured-image.php line 69 to address a warning.
169
+ * Updated "Requires at least" tag to 4.8 (though it should still work in older versions, there was issues with core during the 4.7 phase and it's time for you to update anyway).
170
+
171
  = 2.3.10 =
172
 
173
  * Fixed missing links in settings page.
332
 
333
  == Upgrade Notice ==
334
 
335
+ = 2.3.11 =
336
+
337
+ * New Features and Fixes! Now you can force ALL of your SVG files (old and new) to be rendered inline in a single click with the new "Force Inline SVG" setting. You can also choose to use an expanded version of the inline JS if you want to minify it separately using a caching plugin or similar.
338
+
339
  = 2.3.10 =
340
 
341
  * Fixed missing links in settings page.
svg-support.php CHANGED
@@ -2,8 +2,8 @@
2
  /*
3
  Plugin Name: SVG Support
4
  Plugin URI: http://wordpress.org/plugins/svg-support/
5
- Description: Allow SVG file uploads using the WordPress Media Library uploader plus the ability to inline SVG files for direct targeting of SVG elements for CSS and JS.
6
- Version: 2.3.10
7
  Author: Benbodhi
8
  Author URI: http://benbodhi.com
9
  Text Domain: svg-support
@@ -22,7 +22,7 @@ if ( ! defined( 'ABSPATH' ) ) {
22
  /**
23
  * Global variables
24
  */
25
- $svgs_plugin_version = '2.3.10'; // for use on admin pages
26
  $plugin_file = plugin_basename(__FILE__); // plugin file for reference
27
  define( 'BODHI_SVGS_PLUGIN_PATH', plugin_dir_path( __FILE__ ) ); // define the absolute plugin path for includes
28
  define( 'BODHI_SVGS_PLUGIN_URL', plugin_dir_url( __FILE__ ) ); // define the plugin url for use in enqueue
2
  /*
3
  Plugin Name: SVG Support
4
  Plugin URI: http://wordpress.org/plugins/svg-support/
5
+ Description: Allow SVG file uploads using the WordPress Media Library uploader plus the ability to inline SVG files for direct styling/animation of SVG elements using CSS/JS.
6
+ Version: 2.3.11
7
  Author: Benbodhi
8
  Author URI: http://benbodhi.com
9
  Text Domain: svg-support
22
  /**
23
  * Global variables
24
  */
25
+ $svgs_plugin_version = '2.3.11'; // for use on admin pages
26
  $plugin_file = plugin_basename(__FILE__); // plugin file for reference
27
  define( 'BODHI_SVGS_PLUGIN_PATH', plugin_dir_path( __FILE__ ) ); // define the absolute plugin path for includes
28
  define( 'BODHI_SVGS_PLUGIN_URL', plugin_dir_url( __FILE__ ) ); // define the plugin url for use in enqueue