Scalable Vector Graphics (SVG) - Version 3.0

Version Description

  • Removed the sanitizer. This plugin isn't about security. It's about letting you use SVG files easily.
  • Added more styling to improve Media Manager, including adjustments Grid View and Listing View
  • Added additional styling to allow for SVG files to show for Featured Images.
  • Reduced overall code footprint and complexity.
  • Added code documentation.
  • Resolved several serverside issues you may have been encountering having to do with security related stuff.
Download this release

Release Info

Developer sterlo
Plugin Icon Scalable Vector Graphics (SVG)
Version 3.0
Comparing to
See all releases

Code changes from version 2.1.1 to 3.0

Files changed (2) hide show
  1. readme.txt +47 -4
  2. scalable-vector-graphics.php +61 -22
readme.txt CHANGED
@@ -1,19 +1,47 @@
1
  === Scalable Vector Graphics (SVG) ===
2
  Contributors: sterlo
3
- Donate link: http://sterlinghamilton.com/
4
- Tags: svg, scalable vector graphics
5
  Requires at least: 3.0
6
- Tested up to: 3.3.1
7
  Stable tag: trunk
 
 
8
 
9
  SVG files are two-dimensional vector graphics, that can be both static and dynamic. This plugin allows your to easily use them on your site.
10
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11
  == Installation ==
12
 
13
- 1. Upload `scalable-vector-graphics.php` to the `/wp-content/plugins/` directory
 
14
  1. Activate the plugin through the 'Plugins' menu in WordPress
15
  1. Use SVG files just like you would use a normal image file.
16
 
 
 
 
 
 
 
 
 
 
 
 
 
17
  == Changelog ==
18
 
19
  = 1.0 =
@@ -28,3 +56,18 @@ SVG files are two-dimensional vector graphics, that can be both static and dynam
28
  * Shortcodes are no longer needed, you can now use SVG files as you would any other image.
29
  * Previews now show up in the media area for SVG files.
30
  * IMPORTANT: Anyone using the version prior to 2.0 were using shortcodes to display SVG files. You will have to go back and replace those shortcodes with actual image tags. If you're not familiar with HTML, you can just delete the shortcode out of the page/post and then insert the SVG file as you would any other image.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  === Scalable Vector Graphics (SVG) ===
2
  Contributors: sterlo
3
+ Donate link: http://www.sterlinghamilton.com/projects/scalable-vector-graphics/
4
+ Tags: svg, scalable, vector, mime, type, image, graphic, file, upload
5
  Requires at least: 3.0
6
+ Tested up to: 4.5.3
7
  Stable tag: trunk
8
+ License: GPLv2 or later
9
+ License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
11
  SVG files are two-dimensional vector graphics, that can be both static and dynamic. This plugin allows your to easily use them on your site.
12
 
13
+ == Description ==
14
+
15
+ SVG files are two-dimensional vector graphics, that can be both static and dynamic. This plugin allows you to easily use them on your site.
16
+
17
+ The main project page is located here: [http://www.sterlinghamilton.com/projects/scalable-vector-graphics/](http://www.sterlinghamilton.com/projects/scalable-vector-graphics/ "Scalable Vector Graphics (SVG) | Sterling Hamilton")
18
+
19
+ Warning: Understanding that uploading any file to the system is a potential security risk, it is strongly recommended to only let trusted users to have upload privileges.
20
+
21
+ Resources for understanding security risks:
22
+
23
+ * http://security.stackexchange.com/questions/11384/exploits-or-other-security-risks-with-svg-upload
24
+ * https://www.youtube.com/watch?v=v-a77QdoK2I
25
+
26
  == Installation ==
27
 
28
+ === Manually ===
29
+ 1. Upload scalable-vector-graphics-svg into your plugins directory.
30
  1. Activate the plugin through the 'Plugins' menu in WordPress
31
  1. Use SVG files just like you would use a normal image file.
32
 
33
+ === Plugin Manager ===
34
+ 1. Go to your plugin manager, located generally at ``/wp-admin/plugins.php`
35
+ 1. Click "Add New"
36
+ 1. Search for "Scalable Vector Graphics SVG"
37
+ 1. Click "Install Now"
38
+ 1. Click "Activate Plugin"
39
+
40
+ === WP-CLI ===
41
+ 1. Be in the root of your WordPress installation.
42
+ 1. Run `wp plugin install scalable-vector-graphics-svg`
43
+ 1. Run `wp activate scalable-vector-graphics-svg`
44
+
45
  == Changelog ==
46
 
47
  = 1.0 =
56
  * Shortcodes are no longer needed, you can now use SVG files as you would any other image.
57
  * Previews now show up in the media area for SVG files.
58
  * IMPORTANT: Anyone using the version prior to 2.0 were using shortcodes to display SVG files. You will have to go back and replace those shortcodes with actual image tags. If you're not familiar with HTML, you can just delete the shortcode out of the page/post and then insert the SVG file as you would any other image.
59
+ * Thanks to the guys over at mozilla.org for kicking me in the butt to actually fix this thing: https://bugzilla.mozilla.org/show_bug.cgi?id=721830
60
+ = 2.2.1 =
61
+ * Added a security library to scan all uploaded SVG files. It has a list of "expected" elements and attributes, if the file contains thing it does not expect, it removes them. This will include things like Javascript.
62
+ * The security cannot be perfect and it is recommended to only provide upload privileges to trusted users.
63
+ * Props to thedwards for bringing this to my attention.
64
+ = 2.3.1 =
65
+ * Added inline styling to the administration area so SVG attachments will show up in list/grid views.
66
+ * Props to shield-9 (Daisuke Takahashi) for the code.
67
+ = 3.0 =
68
+ * Removed the sanitizer. This plugin isn't about security. It's about letting you use SVG files easily.
69
+ * Added more styling to improve Media Manager, including adjustments Grid View and Listing View
70
+ * Added additional styling to allow for SVG files to show for Featured Images.
71
+ * Reduced overall code footprint and complexity.
72
+ * Added code documentation.
73
+ * Resolved several serverside issues you may have been encountering having to do with security related stuff.
scalable-vector-graphics.php CHANGED
@@ -1,11 +1,11 @@
1
  <?php
2
  /*
3
  * Plugin Name: Scalable Vector Graphics (SVG)
4
- * Plugin URI: http://sterlinghamilton.com/scalable-vector-graphics-plugin
5
  * Description: Scalable Vector Graphics are two-dimensional vector graphics, that can be both static and dynamic. This plugin allows your to easily use them on your site.
6
- * Version: 2.1.1
7
  * Author: Sterling Hamilton
8
- * Author URI: http://sterlinghamilton.com
9
  * License: GPLv2 or later
10
 
11
  * This program is free software; you can redistribute it and/or
@@ -15,39 +15,78 @@
15
 
16
  * This program is distributed in the hope that it will be useful,
17
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
18
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
19
  * GNU General Public License for more details.
20
 
21
  * You should have received a copy of the GNU General Public License
22
  * along with this program; if not, write to the Free Software
23
- * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
24
  */
25
 
26
- class scalable_vector_graphics {
27
 
28
- public function execute() {
29
- $this->_enable_svg_mime_type();
30
- }
 
 
 
31
 
32
- private function _enable_svg_mime_type() {
33
- add_filter( 'upload_mimes', array( &$this, 'allow_svg_uploads' ) );
34
- }
 
 
 
 
 
 
35
 
36
- public function allow_svg_uploads( $existing_mime_types = array() ) {
37
- return $this->_add_mime_type( $existing_mime_types );
38
- }
39
 
40
- private function _add_mime_type( $mime_types ) {
41
- $mime_types[ 'svg' ] = 'image/svg+xml';
 
 
 
 
 
 
 
 
42
 
43
- return $mime_types;
 
 
 
 
 
 
 
44
  }
45
 
 
46
  }
47
-
48
- if ( class_exists( 'scalable_vector_graphics' ) and ! isset( $scalable_vector_graphics ) ) {
49
- $scalable_vector_graphics = new scalable_vector_graphics();
50
- $scalable_vector_graphics->execute();
 
 
 
 
 
 
 
 
 
 
51
  }
52
 
 
 
 
 
 
53
  ?>
1
  <?php
2
  /*
3
  * Plugin Name: Scalable Vector Graphics (SVG)
4
+ * Plugin URI: http://www.sterlinghamilton.com/projects/scalable-vector-graphics/
5
  * Description: Scalable Vector Graphics are two-dimensional vector graphics, that can be both static and dynamic. This plugin allows your to easily use them on your site.
6
+ * Version: 3.0
7
  * Author: Sterling Hamilton
8
+ * Author URI: http://www.sterlinghamilton.com/
9
  * License: GPLv2 or later
10
 
11
  * This program is free software; you can redistribute it and/or
15
 
16
  * This program is distributed in the hope that it will be useful,
17
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
18
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
19
  * GNU General Public License for more details.
20
 
21
  * You should have received a copy of the GNU General Public License
22
  * along with this program; if not, write to the Free Software
23
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
24
  */
25
 
26
+ namespace SterlingHamilton\Plugins\ScalableVectorGraphics;
27
 
28
+ // Return the accepted value for SVG mime-types in compliance with the RFC 3023.
29
+ // RFC 3023: https://www.ietf.org/rfc/rfc3023.txt 8.19, A.1, A.2, A.3, A.5, and A.7
30
+ // Expects to interface with https://codex.wordpress.org/Plugin_API/Filter_Reference/upload_mimes
31
+ function allow_svg_uploads( $existing_mime_types = array() ) {
32
+ return array( 'svg' => 'image/svg+xml' );
33
+ }
34
 
35
+ // This is a decent way of grabbing the dimensions of SVG files.
36
+ // Depends on http://php.net/manual/en/function.simplexml-load-file.php
37
+ // I believe this to be a reasonable dependency and should be common enough to
38
+ // not cause problems.
39
+ function get_dimensions( $svg ) {
40
+ $svg = simplexml_load_file( $svg );
41
+ $attributes = $svg->attributes();
42
+ $width = (string) $attributes->width;
43
+ $height = (string) $attributes->height;
44
 
45
+ return (object) array( 'width' => $width, 'height' => $height );
46
+ }
 
47
 
48
+ // Browsers may or may not show SVG files properly without a height/width.
49
+ // WordPress specifically defines width/height as "0" if it cannot figure it out.
50
+ // Thus the below is needed.
51
+ //
52
+ // Consider this the "server side" fix for dimensions.
53
+ // Which is needed for the Media Grid within the Administration area.
54
+ function adjust_response_for_svg( $response, $attachment, $meta ) {
55
+ if( $response['mime'] == 'image/svg+xml' && empty( $response['sizes'] ) ) {
56
+ $svg_file_path = get_attached_file( $attachment->ID );
57
+ $dimensions = get_dimensions( $svg_file_path );
58
 
59
+ $response[ 'sizes' ] = array(
60
+ 'full' => array(
61
+ 'url' => $response[ 'url' ],
62
+ 'width' => $dimensions->width,
63
+ 'height' => $dimensions->height,
64
+ 'orientation' => $dimensions->width > $dimensions->height ? 'landscape' : 'portrait'
65
+ )
66
+ );
67
  }
68
 
69
+ return $response;
70
  }
71
+ // Browsers may or may not show SVG files properly without a height/width.
72
+ // WordPress specifically defines width/height as "0" if it cannot figure it out.
73
+ // Thus the below is needed.
74
+ //
75
+ // Consider this the "client side" fix for dimensions.
76
+ //
77
+ // WordPress requires inline administration styles to be wrapped in an actionable function.
78
+ // These styles specifically address the Media Listing styling and Featured Image
79
+ // styling so that the images show up in the Administration area.
80
+ function styles() {
81
+ // Media Listing Fix
82
+ wp_add_inline_style( 'wp-admin', ".media .media-icon img[src$='.svg'] { width: auto; height: auto; }" );
83
+ // Featured Image Fix
84
+ wp_add_inline_style( 'wp-admin', "#postimagediv .inside img[src$='.svg'] { width: 100%; height: auto; }" );
85
  }
86
 
87
+ // Do work son.
88
+ add_filter( 'upload_mimes', __NAMESPACE__ . '\\allow_svg_uploads' );
89
+ add_filter( 'wp_prepare_attachment_for_js', __NAMESPACE__ . '\\adjust_response_for_svg', 10, 3 );
90
+ add_action( 'admin_enqueue_scripts', __NAMESPACE__ . '\\styles' );
91
+
92
  ?>