SVG Support - Version 1.0

Version Description

  • Initial Release.

=

Download this release

Release Info

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

Version 1.0

Files changed (7) hide show
  1. functions/enqueue.php +8 -0
  2. functions/mime-types.php +8 -0
  3. js/svg-inline.js +30 -0
  4. languages/svg-support-en_AU.mo +0 -0
  5. languages/svg-support-en_AU.po +58 -0
  6. readme.txt +126 -0
  7. svg-support.php +45 -0
functions/enqueue.php ADDED
@@ -0,0 +1,8 @@
 
 
 
 
 
 
 
 
1
+ <?php
2
+ add_action( 'wp_enqueue_scripts', 'bodhi_gc_svg_inline' );
3
+
4
+ function bodhi_gc_svg_inline() {
5
+ wp_register_script('bodhi_gc_svg_inline', plugins_url('svg-support/js/svg-inline.js'), array(), '1.0.0', false );
6
+ wp_enqueue_script('bodhi_gc_svg_inline');
7
+ }
8
+ ?>
functions/mime-types.php ADDED
@@ -0,0 +1,8 @@
 
 
 
 
 
 
 
 
1
+ <?php
2
+ add_filter( 'upload_mimes', 'bodhi_gc_upload_mimes' );
3
+
4
+ function bodhi_gc_upload_mimes($mimes = array()) {
5
+ $mimes['svg'] = 'image/svg+xml'; // allow SVG file upload
6
+ return $mimes;
7
+ }
8
+ ?>
js/svg-inline.js ADDED
@@ -0,0 +1,30 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ jQuery(document).ready(function ($) {
2
+ jQuery('img.style-svg').each(function(){
3
+ var $img = jQuery(this);
4
+ var imgID = $img.attr('id');
5
+ var imgClass = $img.attr('class');
6
+ var imgURL = $img.attr('src');
7
+
8
+ jQuery.get(imgURL, function(data) {
9
+ // Get the SVG tag, ignore the rest
10
+ var $svg = jQuery(data).find('svg');
11
+
12
+ // Add replaced image's ID to the new SVG
13
+ if(typeof imgID !== 'undefined') {
14
+ $svg = $svg.attr('id', imgID);
15
+ }
16
+ // Add replaced image's classes to the new SVG
17
+ if(typeof imgClass !== 'undefined') {
18
+ $svg = $svg.attr('class', imgClass+' replaced-svg');
19
+ }
20
+
21
+ // Remove any invalid XML tags as per http://validator.w3.org
22
+ $svg = $svg.removeAttr('xmlns:a');
23
+
24
+ // Replace image with new SVG
25
+ $img.replaceWith($svg);
26
+
27
+ }, 'xml');
28
+
29
+ });
30
+ });
languages/svg-support-en_AU.mo ADDED
Binary file
languages/svg-support-en_AU.po ADDED
@@ -0,0 +1,58 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ msgid ""
2
+ msgstr ""
3
+ "Project-Id-Version: SVG Support v1.0\n"
4
+ "Report-Msgid-Bugs-To: \n"
5
+ "POT-Creation-Date: \n"
6
+ "PO-Revision-Date: 2014-07-22 06:51:40+0000\n"
7
+ "Last-Translator: GoWebben <info@gowebben.com>\n"
8
+ "Language-Team: \n"
9
+ "MIME-Version: 1.0\n"
10
+ "Content-Type: text/plain; charset=UTF-8\n"
11
+ "Content-Transfer-Encoding: 8bit\n"
12
+ "Plural-Forms: nplurals=2; plural=n != 1;\n"
13
+ "X-Generator: CSL v1.x\n"
14
+ "X-Poedit-Language: English\n"
15
+ "X-Poedit-Country: AUSTRALIA\n"
16
+ "X-Poedit-SourceCharset: utf-8\n"
17
+ "X-Poedit-KeywordsList: __;_e;__ngettext:1,2;_n:1,2;__ngettext_noop:1,2;_n_noop:1,2;_c,_nc:4c,1,2;_x:1,2c;_ex:1,2c;_nx:4c,1,2;_nx_noop:4c,1,2;\n"
18
+ "X-Poedit-Basepath: ../\n"
19
+ "X-Poedit-Bookmarks: \n"
20
+ "X-Poedit-SearchPath-0: .\n"
21
+ "X-Textdomain-Support: yes"
22
+
23
+ #. translators: plugin header field 'Name'
24
+ #: svg-support.php:0
25
+ #@ svg-support
26
+ msgid "SVG Support"
27
+ msgstr ""
28
+
29
+ #. translators: plugin header field 'PluginURI'
30
+ #: svg-support.php:0
31
+ #@ svg-support
32
+ msgid "http://gowebben.com/"
33
+ msgstr ""
34
+
35
+ #. translators: plugin header field 'Description'
36
+ #: svg-support.php:0
37
+ #@ svg-support
38
+ msgid "Allows SVG file uploads plus direct styling of SVG elements using CSS."
39
+ msgstr ""
40
+
41
+ #. translators: plugin header field 'Author'
42
+ #: svg-support.php:0
43
+ #@ svg-support
44
+ msgid "Benbodhi"
45
+ msgstr ""
46
+
47
+ #. translators: plugin header field 'AuthorURI'
48
+ #: svg-support.php:0
49
+ #@ svg-support
50
+ msgid "http://benbodhi.com"
51
+ msgstr ""
52
+
53
+ #. translators: plugin header field 'Version'
54
+ #: svg-support.php:0
55
+ #@ svg-support
56
+ msgid "1.0"
57
+ msgstr ""
58
+
readme.txt ADDED
@@ -0,0 +1,126 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ === SVG Support ===
2
+ Contributors: Benbodhi
3
+ Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=F7W2NUFAVQGW2
4
+ Tags: svg, vector, css, style, mime, mime type, embed, img, inline
5
+ Requires at least: 3.4
6
+ Tested up to: 3.9.1
7
+ Stable tag: 1.0
8
+ License: GPLv2 or later
9
+ License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
+
11
+ Allows SVG file uploads plus direct styling of SVG elements using CSS.
12
+
13
+ == Description ==
14
+
15
+ When using SVG images on your WordPress site, it can be hard to style elements within the SVG using CSS. **Now you can, easily!**
16
+
17
+ Scalable Vector Graphics (SVG) are becoming common place in modern web design, allowing you to embed images with small file sizes that are scalable to any visual size without loss of quality.
18
+
19
+ This plugin not only provides SVG Support like the name says, it also allows you to easily embed your full SVG file's code using a simple IMG tag.<br />
20
+ By adding the class `"style-svg"` to your IMG elements, this plugin dynamically replaces any IMG elements containing the `"style-svg"` class with your complete SVG.
21
+
22
+ The main purpose of this is to allow styling of SVG elements. Usually your styling options are restricted when using `embed`, `object` or `img` tags alone.
23
+
24
+ = Features =
25
+
26
+ * Adds mime type support for SVG uploads to your media library
27
+ * Allows you to style SVG files and their elements directly using CSS
28
+ * No settings, no menu - it just works
29
+
30
+ = Usage =
31
+
32
+ Firstly, install SVG Support (this plugin) and activate it.
33
+ Once activated, you can simply upload SVG images to your media library like any other file.
34
+
35
+ Now, embed your SVG image like a standard image with the addition of adding the class `"style-svg"` to your IMG tags that you want this plugin to swap out with your actual SVG code.<br />
36
+ For example:
37
+
38
+ `<img class="style-svg" alt="alt-text" src="image-source.svg" />`
39
+
40
+ The whole IMG tag element will now be dynamically replaced by the actual code of your SVG, making the inner content targetable.<br />
41
+ This allows you to target elements within your SVG using CSS.
42
+
43
+ *If you are having any issues, please use the support tab and I will try my best to get back to you quickly*
44
+
45
+ = Security =
46
+
47
+ As with allowing uploads of any files, there is potential risks involved. Only allow users to upload SVG files if you trust them. I will be adding the ability to choose which roles can upload SVG files in the future.
48
+
49
+ = Translations =
50
+
51
+ * English - default, always included
52
+ * *Your translation? - [Just send it in](http://gowebben.com/contact/)*
53
+
54
+ *Note:* This plugin is localized/translateable by default. This is very important for all users worldwide. So please contribute your language to the plugin to make it even more useful.<br />
55
+ For translating I recommend the awesome ["Codestyling Localization" plugin](http://wordpress.org/extend/plugins/codestyling-localization/) and for validating the ["Poedit Editor"](http://www.poedit.net/).
56
+
57
+ = Feedback =
58
+
59
+ * I am open to your suggestions and feedback - Thanks for checking out this plugin!
60
+ * Drop me a line [@benbodhi](http://twitter.com/benbodhi) or [@GoWebben](http://twitter.com/gowebben) on Twitter
61
+ * Follow me on [my Facebook page](http://www.facebook.com/gowebben)
62
+ * Or circle [+GoWebben](http://googleplus.url) on Google Plus ;-)
63
+
64
+ *Note:* This is the second plugin I have submitted to 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.<br />
65
+ As always, feel free to send me any suggestions.
66
+
67
+ == Installation ==
68
+
69
+ To install this plugin:
70
+
71
+ = via wp-admin =
72
+ 1. Upload the compressed version `svg-support.zip` through 'Plugins' > 'Add New' > 'Upload'
73
+ 2. Click 'Activate Plugin'
74
+
75
+ or
76
+
77
+ 1. Visit 'Plugins' > 'Add New'
78
+ 2. Type "SVG Support" into the search field
79
+ 3. Click 'Install Plugin' and confirm in the pop up
80
+ 4. Hover over SVG Support and click 'Activate Plugin'
81
+
82
+
83
+ = via FTP =
84
+ 1. Download plugin file and extract it
85
+ 2. Upload folder `svg-support` to your `/wp-content/plugins/` directory
86
+ 3. Activate the plugin through the 'Plugins' menu in WordPress
87
+
88
+ == Frequently Asked Questions ==
89
+
90
+ = Got a question? =
91
+
92
+ I will put the answers to any questions asked here.
93
+
94
+ == Screenshots ==
95
+
96
+ 1. Activated plugin (everything works behind the scenes)
97
+
98
+ == Changelog ==
99
+
100
+ = 1.0 =
101
+
102
+ * Initial Release.
103
+
104
+ == Upgrade Notice ==
105
+
106
+ = 1.0 =
107
+
108
+ Initial Release.
109
+
110
+ == Translations ==
111
+
112
+ * English - default, always included
113
+ * *Your translation? - [Just send it in](mailto:wp@benbodhi.com)*
114
+
115
+ *Note:* This plugin is localized/translateable by default. This is very important for all users worldwide. So please contribute your language to the plugin to make it even more useful. For translating I recommend the awesome ["Codestyling Localization" plugin](http://wordpress.org/extend/plugins/codestyling-localization/) and for validating the ["Poedit Editor"](http://www.poedit.net/).
116
+
117
+ == Additional Info ==
118
+ **Idea Behind / Philosophy:** I needed an easy way to include this support in sites that I build instead of having to copy paste the code for each one. 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 decided to put it all into a plugin for ease of use and to share with others. Now styling SVG elements is super easy :)
119
+
120
+ == Future Features ==
121
+ * Help / Instructions Page
122
+ * Ability to choose user roles allowed to upload SVG format (eg. restrict to administrator)
123
+ Again, feel free to [shoot me suggestions](mailto:wp@benbodhi.com)
124
+
125
+ == Credits ==
126
+ [Benbodhi Mantra](http://benbodhi.com/) [@benbodhi](http://twitter.com/benbodhi) from [GoWebben](http://gowebben.com/) [@GoWebben](http://twitter.com/gowebben)
svg-support.php ADDED
@@ -0,0 +1,45 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /*
3
+ Plugin Name: SVG Support
4
+ Plugin URI: http://wordpress.org/plugins/svg-support/
5
+ Description: Allows SVG file uploads plus direct styling of SVG elements using CSS.
6
+ Author: Benbodhi
7
+ Author URI: http://benbodhi.com
8
+ Text Domain: svg-support
9
+ Domain Path: /languages
10
+ License: GPL2
11
+ Version: 1.0
12
+ */
13
+ /* Copyright 2013 Benbodhi (email : wp@benbodhi.com)
14
+
15
+ This program is free software; you can redistribute it and/or modify
16
+ it under the terms of the GNU General Public License, version 2, as
17
+ published by the Free Software Foundation.
18
+
19
+ This program is distributed in the hope that it will be useful,
20
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
21
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
22
+ GNU General Public License for more details.
23
+
24
+ You should have received a copy of the GNU General Public License
25
+ along with this program; if not, write to the Free Software
26
+ Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
27
+ */
28
+
29
+ /********************************************
30
+ * INTERNATIONALIZATION / LOCALIZATION
31
+ ********************************************/
32
+ load_plugin_textdomain('svg-support', false, basename( dirname( __FILE__ ) ) . '/languages' );
33
+
34
+ /********************************************
35
+ * GLOBAL VARIABLES
36
+ ********************************************/
37
+ define( 'BODHI_SVGS_PLUGIN_PATH', plugin_dir_path( __FILE__ ) ); // define the absolute plugin path for includes
38
+
39
+ /********************************************
40
+ * INCLUDES - keeping it modular
41
+ ********************************************/
42
+ include( BODHI_SVGS_PLUGIN_PATH . 'functions/mime-types.php' ); // include mime types support file
43
+ include( BODHI_SVGS_PLUGIN_PATH . 'functions/enqueue.php' ); // include enqueues file
44
+
45
+ ?>