SVG podpora

Popis

Upload SVG files to your media library securely, with built-in sanitization and advanced features for styling and animation.

SVG Support goes beyond just enabling SVG uploads. It offers powerful features that make working with SVGs easier and more flexible.

Scalable Vector Graphics (SVG) are a staple in modern web design, allowing you to embed images with small file sizes that scale perfectly at any size without losing quality. However, styling and animating SVGs can be challenging when using standard methods. SVG Support simplifies this by allowing you to render your SVGs inline, enabling direct styling and animation using CSS and JavaScript.

This plugin provides:

  • SVG Upload Support: Easily upload SVG files to your media library.
  • Automatic Sanitization: All SVG uploads are sanitized by default to ensure security.
  • Minification Options: Reduce SVG file sizes with optional minification.
  • Inline Rendering: Render SVG code inline by adding the "style-svg" class to your images, making the elements within your SVGs directly targetable for styling and animation.
  • Role-Based Upload Control: Restrict SVG upload capabilities to specific user roles.
  • Custom Target Class: Define a custom CSS class for targeting SVGs, which can be applied to outer elements for greater flexibility.

Funkce

  • Full SVG support in your media library
  • Automatic sanitization for secure SVG uploads
  • Optional minification for smaller SVG file sizes
  • Role-based upload restrictions
  • Inline SVG rendering for easy styling and animation
  • Custom target class support for flexible SVG handling
  • Simple and intuitive settings page with clear instructions
  • Extremely Simple to Use – Simplifies complex SVG file handling

Využití

  1. Installation: Install and activate SVG Support (this plugin) through your WordPress dashboard.

  2. Basic Usage: Once activated, you can upload SVG files to your media library like any other image file.

  3. Admin Settings:

    • Navigate to „Settings > SVG Support“ in your WordPress admin dashboard.
    • Restrict SVG file uploads to specific user roles, such as Administrators.
  4. Advanced Mode:

    • If you only need to upload SVG files as static images, you don’t need to enable „Advanced Mode“. This keeps the plugin lightweight by not enqueuing unnecessary scripts.
    • For Advanced Use: Enable „Advanced Mode“ to access additional features such as minification and inline rendering.
  5. Inline SVG Rendering:

    • With Advanced Mode enabled, you can embed SVG images by adding the "style-svg" class (or a custom class you’ve defined) to your <img> tags.
    • Example:
      <img class="style-svg" alt="alt-text" src="image-source.svg" />
      or
      <img class="your-custom-class" alt="alt-text" src="image-source.svg" />
    • The plugin dynamically replaces the <img> element with the actual SVG code, making the SVG’s internal elements targetable by CSS and JavaScript.
  6. Custom Target Classes:

    • You can set a custom class to target for inline rendering.
    • You can add the target class to outer elements if you cannot directly add it to the <img> tag. The plugin will traverse the element’s children to find and replace the SVG.
  7. Auto-Class Insertion (Classic Editor):

    • Enable the setting to automatically add your target class to SVG images when inserting them into posts or pages. This also removes unnecessary attributes.
  8. Inline Rendering:

    • Since version 2.3.11, you can force all SVG files sitewide to be rendered inline with a single checkbox (use with caution).
    • You can choose between the minified or expanded version of the JS file for inline rendering.
    • You can choose between the jQuery or vanilla JS file for inline rendering.
  9. Featured Images:

    • If you save a post/page with an SVG as the featured image, a checkbox will appear in the featured image meta box to allow you to render the SVG inline (only available if Advanced Mode is active).

Important: If your SVG isn’t displaying correctly, it might be due to 0 height and width. Set your SVG’s dimensions in your CSS to ensure proper display.

For any issues, please use the support tab, and I will do my best to assist you quickly.

Spustit testovací stránku

Jediným kliknutím můžete otevřít zcela bezplatný testovací web pro testování podpory SVG pomocí TasteWP! Žádná registrace, žádné karty, nic! Jak skvělé to je? Dejte tomu šanci:
Kliknutím sem se roztočí testovací web během několika sekund

Zabezpečení

Uploading files, including SVGs, comes with potential risks. SVG Support provides several features to help mitigate these risks and ensure secure handling of SVG files:

  • Sanitization by default: Starting from version 2.5.8, all SVG uploads are sanitized by default to remove any potentially malicious code.
  • Role-Based Upload Restrictions: You can restrict SVG uploads to specific user roles, ensuring only trusted users can upload these files.
  • Optional Bypass of Sanitization: You have the option to allow certain roles to bypass the sanitization process, though this should be used with caution.

Important: Only allow users you trust to upload SVG files. By default, anyone with Media Library access or the upload_files capability (e.g., Administrators, Authors, Editors) can upload SVGs. Remember, SVG files are XML-based, meaning they can contain malicious code if not properly sanitized. Always configure your settings to balance functionality with security.

Zpětná vazba

Jsem otevřen Vašim návrhům a zpětné vazbě – děkujeme, že používáte podporu SVG!

Follow @SVGSupport on Twitter
Follow @benbodhi on Twitter
Follow @benbodhi on Warpcast

Poznámka: Doufám, že se vám tento plugin líbí! Věnujte prosím chvíli hodnocení.

Překlady

Zde můžete přispět svým překladem.
Jste v překladu WordPress noví? Přečtěte si příručku Translator Handbook a začněte.

Snímky obrazovky

  • Základní nastavení
  • Pokročilá nastavení
  • Zaškrtávací políčko Vybraný obrázek k vykreslení SVG vložené
  • SVG použitý v nativním WP Image Widget (od 4.9)
  • Řadový SVG v označení předního konce
  • Karta Nápovědy – Přehled
  • Karta Nápovědy – Nastavení
  • Karta Nápovědy – Standardní použití
  • Karta Nápovědy – Render SVG Inline (pokročilé použití)

Nejčastější dotazy

SVG se nevydává vložené od aktualizace 2.3

Podpora SVG 2.3 obsahuje novou sekci nastavení nazvanou „Pokročilý režim“. Uživatelé, kteří vkládali soubory SVG, se musí ujistit, že je toto nastavení zaškrtnuto. Přejděte na hlavní panel > Nastavení > Podpora SVG a zaškrtněte „Pokročilý režim“. Všechna původní nastavení by měla zůstat.

Jak deaktivuji Javascript na klientském rozhraní, pokud nepoužívám vložený SVG?

Pokud přejdete do Nastavení > Podpora SVG na hlavním panelu administrátora můžete povolit nebo zakázat „Pokročilý režim“. Pokud ho necháte deaktivovaný, pokročilé funkce a cizí skript budou odstraněny.

Snažím se používat SVG v přizpůsobení, ale nefunguje to.

Chcete-li, aby SVG fungoval v přizpůsobovacím nástroji, budete muset upravit/přidat nějaký kód do funkčního souboru podřízeného motivu. Zde je skvělý návod jak na to. Důležitou součástí je:

'flex-width'    => true
'flex-height'   => true

Jak přidám animaci do svého SVG?

Budete muset upravit soubor SVG v editoru kódu, abyste mohli přidat třídy CSS ke každému prvku, na který chcete v rámci SVG cílit. Ujistěte se, že je Vaše značka IMG vyměněna za vložený SVG, a pak můžete použít CSS nebo JS k použití animací na prvky ve Vašem souboru SVG.

Proč podpora SVG nefunguje na více stránkách?

Pokud jste nainstalovali síť webů před WordPress 3.5, budete muset odstranit ms-files. Zde je několik zdrojů, které vám pomohou: Dumping ms-files Odstranění ms-files after 3.5.

Proč můj SVG nefunguje ve Visual Composeru?

Pokud používáte podporu SVG s Visual Composerem nebo jinými nástroji pro tvorbu stránek, budete se muset ujistit, že do obrázku můžete přidat vlastní třídu. Nejjednodušší způsob, jak to udělat, je použít jednoduchý textový nebo kódový blok v nástroji Builder k vložení kódu do obrázku. Kromě toho nyní existuje nastavení, které vynutí, aby byli všechny soubory SVG vykreslovány inline.

Jak docílím, aby to fungovalo s pluginem Media Library Assistant?

Musíte přidat typ mime pro svg a svgz do: „MLA Settings > Media Library Assistant > Uploads (tab)“ a pak to funguje.

Recenze

4. 12. 2024 1 odpověď
It’s an absolute lifesaver for anyone working with SVGs on WordPress. The plugin is simple to set up, and it works flawlessly. The SVG inliner feature stands out as my personal favorite! It gives a complete control to style and animate SVGs, making designs more dynamic and flexible.Massive thanks to @benbodhi for developing such a fantastic tool.
5. 8. 2024 3 odpovědi
Hi everyone, I updated from 2.5.6 to 2.5.7 and my website was broken, (I had to restore a backup just to get it online again), I saw that other users also had the same problem ( name of review: Test updates before releasing ) Are there others out there that this version 2.5.7 broke there website as well?Thank you!( Wordpress version: 6.6.1 / all other plugins are up to date)
Přečtěte si všech 341 recenzí

Autoři

SVG podpora je otevřený software. Následující lidé přispěli k vývoji tohoto pluginu.

Spolupracovníci

Plugin „SVG podpora“ byl přeložen do 18 jazyků. Děkujeme všem překladatelům za jejich pomoc.

Přeložte “SVG podpora” do svého jazyka.

Zajímá vás vývoj?

Prohledejte kód, podívejte se do SVN repozitáře, nebo se přihlaste k odběru protokolu vývoje pomocí RSS.

Přehled změn

2.5.8

  • Security Enhancements:

    • Improved sanitization of SVG uploads and attachments for enhanced security.
    • Ensured all output in the admin settings page is properly escaped.
    • Replaced direct file handling functions with WordPress APIs for better security and compatibility.
    • Improved translation support with added translators‘ comments and ordered placeholders.
  • Admin Interface Improvements:

    • Updated admin-init.php with better escaping practices and enhanced security for the settings page.
    • Added error logging to SVG processing to assist with debugging without disrupting the user experience.
  • Performance and Compatibility:

    • Updated enqueue functions to ensure scripts and styles are loaded efficiently with proper dependencies.
    • Improved metadata handling for SVGs to prevent issues in the Media Library and with ACF integration.
    • Optimized nonce verification and meta updates in the featured image functions to prevent unnecessary database writes.
  • General Code Improvements:

    • Refactored code to reduce redundancy and improve maintainability.
    • Added detailed inline documentation for better code clarity and future development.
  • Experimental Integration with WP All Import:

    • Introduced integration with WP All Import for experimental SVG handling during imports.
    • SVG files imported via WP All Import are sanitized, and their metadata is generated and updated correctly.
    • Added error logging to track issues during SVG import processing.
    • Note: This feature is experimental and commented out in the main plugin file for now. Feel free to uncomment the include lines to test it out, but please ensure you back up your data first.

2.5.7

  • Compatibility with newer versions of php.

2.5.6

  • Addressed some security concerns.

2.5.5

  • Další opravy chyb a obecné čištění.

2.5.4

  • Opraveny chyby.

2.5.3

  • Opravena fatální PHP chyba.

2.5.2

  • Přidány některé výchozí hodnoty pro lepší zabezpečení ve výchozím nastavení.

2.5.1

  • Přidány chybějící uvozovky v uninstall.php.

2.5

  • Opraveny pravopisné chyby a obecné formátování.
  • Řeší bezpečnostní problém.
  • Přidány další možnosti očištění – podporovány jak frontend, tak admin.
  • Přidána podpora pro minifikaci SVG.
  • Přidána možnost vybrat si jQuery nebo vanilla JS.
  • Přidáno vyčištění DB při odinstalaci.
  • Pevné záložní rozměry.

2.4.2

  • Opraveno varování srcset pro některá prémiová témata.
  • Opravena původní IMG ID, která se při výměně nezachovala.
  • Odstraněn nějaký nepoctivý text z doporučeného obrázku.

2.4.1

  • Opraven problém způsobující přerušení WP-CLI.

2.4

  • NOVÁ FUNKCE: Přidána volitelné očištění SVG.
  • NOVÁ FUNKCE: Přidána volitelná miniifikace SVG.
  • Přidáno zaškrtávací políčko SVG vložené do obrázku Gutenberg.
  • Obecně lepší podpora Gutenberga.
  • Upravené cílení na třídy, které umožňuje vnořené vykreslování vnořených SVG (jakákoli úroveň hloubky), když nemůžete přímo nastavit třídu IMG.
  • Upravený JS tak, aby místo jQuery používal vanilla JS.
  • Opraveny problémy s přístupností na stránce nastavení.
  • Opravený problém s metadaty dimenzí.
  • Opraven problém s dělením 0, když SVG nemělo nastavenou šířku ani výšku.
  • Opraven problém s mezerami mezi obrázky v klasickém i blokovém editoru.
  • Překonaná požadovaná verze PHP.
  • Odstraněno zastaralé upozornění správce.
  • Odebrána sada srcset pro soubory SVG.
  • Z metadat cesty k souboru byl odstraněn název adresáře.

2.3.21

  • Opraven kontejner překrývajícího se SVG s doporučeným obrázkem.

2.3.20

  • Opravené nastavení administrátora, které při výstupu neuniklo.

2.3.19

  • Opraveno varování PHP z localize_script v functions/enqueue.php.
  • Přidána kontrola atributu SRC v js/svgs-inline.js.

2.3.18

  • Aktualizovaná adresa URL autora v hlavním souboru pluginu.
  • Aktualizovány dárcovské odkazy.
  • Vyčištěná stránka meta odkazů akce pluginu a nastavení.
  • Vrácena oprava ve functions/attachment.php kvůli tomu, že odstranila meta z jiných příloh.

2.3.17

  • Přidané nastavení pro výběr, zda načíst frontend CSS nebo ne.

2.3.16

  • Oprava pro soubory, které mají deklaraci XML.
  • Oprava varování PHP z widgetu obrázku.
  • Některé malé změny CSS na frontendu při zobrazování příloh médií SVG.

2.3.15

  • Musel jsem odvolat nedávnou opravu varování PHP kvůli narušení některé kompatibility témat.

2.3.14

  • Oprava: Závažná chyba v některých případech při odstraňování staré možnosti z databáze.

2.3.13

  • Oprava: Varování a upozornění PHP z widgetu obrazu při použití souborů SVG a wp_debug byl zapnutý.
  • Upraveno: Lepší front-end CSS pro zobrazování příloh SVG, ať už jako obrázků nebo vložených.
  • Odebráno: položka DB pro zastaralé upozornění správce.

2.3.12

  • Novinka: Nativní karta „Nápověda“ na stránce nastavení podpory SVG.
  • Novinka: Zabalený vložený JS do funkce, takže jej můžete libovolně volat pomocí bodhisvgsInlineSupport();.
  • Upraveno: Spravujte CSS pouze pro cílení na SVG src.
  • Upraveno: Stránka nastavení podpory SVG – trochu byla vyčištěna.
  • Odebráno: Upozornění na aktualizaci verze administrátora.

2.3.11

  • Novinka: Funkce používající spíše rozšířený soubor JS než minifikovanou/komprimovanou verzi (užitečné pro sdružování a minifikaci pomocí externích modulů pro ukládání do mezipaměti).
  • Novinka: Možnost Vynutit vložený SVG. Tato funkce umožňuje vynutit vykreslení všech Vašich souborů SVG inline bez ohledu na použité třídy. Řeší problémy, kdy z nějakého důvodu nemůžete do obrázku přidat vlastní třídu. Například některé prvky obrázku tvůrce stránky. Také řeší změnu cílové třídy v nastavení a nutnost změnit všechna Vaše již vložená média, což vám umožní jednoduše vynutit vykreslení, spíše než aktualizovat všechny třídy.
  • Trochu upraven soubor readme a popisy.
  • Vylepšil nějaký kód v řádku 69 functions/featured-image.php pro řešení varování.
  • Aktualizována značka „Vyžaduje alespoň“ na 4.8 (i když by to mělo fungovat i ve starších verzích, během fáze 4.7 došlo k problémům s jádrem a je čas proto na aktualizaci).

2.3.10

  • Opravené chybějící odkazy na stránce nastavení.

2.3.9

  • Upravený meta odkaz akce pluginu pro stránku nastavení.
  • V celém pluginu byl změněn nějaký jazyk.
  • Přidáno doporučení pro optimalizaci obrazu ShortPixel.
  • Přidáno podmíněné pro kontrolu typu příspěvku podporuje miniatury před nastavením metadat.

2.3.8

  • Přidali jsme několik CSS, aby bylo zajištěno, že se vybrané obrázky budou zobrazovat na produktech WooCommerce, kurzech a lekcích sensei.
  • Oprava: Nastavení třídy automatického vkládání v některých případech odstranilo vybrané obrázky HTML.

2.3.7

  • Přidána kontrola verze WP, aby se zabalila funkce opravy MIME potřebná pro WP v4.7.1 – v4.7.2.
  • Oprava mime přesunuta do souboru typu mime.
  • Upravený kód upozornění administrátora, aby byl přehlednější.
  • Oprava: Problémy s attachment-modal.php s některými servery a externími soubory SVG (podnět od @abstractourist & @malthejorgensen za poskytování oprav, protože jsem nemohl problém důsledně reprodukovat).
  • Kompatibilita: Řádek byl změněn, aby poskytoval širší kompatibilitu, konkrétně pro WordPress Bedrock v zásobníku LEMP.
  • Kompatibilita: Přidán další fragment do JS na podporu IE11 (zřejmě lidé stále používají IE).
  • Přidány další časté dotazy.

2.3.6

  • Novinka: Přidáno polyfill, aby svgs-inline.js fungoval se staršími prohlížeči.
  • Novinka: Sekce pro zanechání recenzí na stránce nastavení.
  • Odstraněno: Redundantní aktivační kód jednorázové aktualizace.
  • Oprava: Chyby hlášené při aktivaci a na stránce nastavení – Související podpůrné vlákno.

2.3.5

  • Revize a úpravy kódu pro zobrazení miniatur.

2.3.4

  • Oprava: Fatální chyba pro některé, protože funkce neměla předponou.

2.3.3

  • Oprava: Chybějící argumenty Varování PHP z nového souboru kontroly atributů.
  • Aktualizujte text stránky nastavení.

2.3.2

  • Upravený kód kontroly atributu, který automaticky vloží naši třídu, aby se vztahoval pouze na soubory SVG.

2.3.1

  • Oprava: Závažná chyba v některých případech z důvodu upozornění správce.

2.3

  • Nová funkce – Pokročilý režim: umožňuje vypnout pokročilé funkce a jednoduše nahrát soubory SVG jako normální obrázky. Toto přidání také umožňuje uživatelům vypnout skript přidaný do rozhraní frontend ponecháním nezaškrtnutého rozšířeného režimu.
  • Nová funkce – Podpora doporučených obrázků: Pokud je Vaším doporučeným obrázkem SVG, po uložení příspěvku se zobrazí zaškrtávací políčko pro vykreslení vložené SVG (pouze v pokročilém režimu).
  • Výkon – Zastavte vložení JS do běhu, pokud zdrojem obrazu není SVG.
  • Přidána nová šablona stylů pro stránku nastavení.
  • Přesunul soubory SCSS do své vlastní složky.
  • Změněný odkaz na darování, abych ho mohl sledovat a řádně Vám poděkovat za Vaše štědré dary.
  • Přidán odkaz hodnocení na stránky nastavení a médií.
  • Vyčištěno formátování kódu, přidáno více komentářů.
  • Přidána kontrola verze pluginu.
  • Přidáno upozornění, aby si lidé byli vědomi, že bude možná nutné zapnout pokročilý režim.

2.2.5

  • Oprava: Zobrazení miniatur SVG v modálních přílohách.

2.2.4

  • Oprava: Přidaná funkce pro dočasné řešení problému s nahráváním ve WP 4.7.1

2.2.32

  • Změněna textová domény tak, aby odpovídala slimáku pluginu pro lokalizaci.

2.2.31

  • Pokus o opravu schopnosti překládat

2.2.3

  • Upravený kód v svg-support/js/svg-inline.js and svg-support/js/min/svg-inline-min.js povoluje JS kontrolu prvků SVG a zjišťuje, zda byly načteny (značka IMG byla vyměněna). Děkuji laurosello za tento návrh a příspěvek kódu.
  • Opravené miniatury SVG, které se nezobrazovaly správně v zobrazení seznamu knihovny médií.
  • Vyčistil kód a trochu komentoval.
  • Přidán překlad pro španělštinu. Díky Apasionados del Marketing za překlad.

2.2.2

  • Změněna další anonymní funkce v svg-support/functions/thumbnail-display.php, která u některých způsobovala chyby.

2.2.1

  • Změněna anonymní funkce v řádku 15 svg-support/functions/thumbnail-display.php, aby se zabránilo fatálním chybám ve starších verzích PHP.

2.2

  • Přidána podpora pro zviditelnění miniatur SVG na všech obrazovkách knihovny médií.
  • Přidáno SVGZ k typům mimů.
  • Při vkládání souborů SVG automaticky odstraní atributy šířky a výšky.
  • Přidaná schopnost zvolit, zda se cílová třída automaticky vloží do značek img, nebo ne, zbaví výchozí třídy WordPress.
  • Přidána možnost zvolit, zda bude výstup skriptu v zápatí – true nebo false.
  • Blokovaný přímý přístup k souborům PHP.
  • Přidána podpora SCSS pomocí CodeKit – minifikovaných souborů CSS + JS.
  • Aktualizovaný pravopis pro nesprávný název funkce.
  • Z důvodu konzistence změněno formátování komentářů napříč všemi soubory.
  • Přidán odkaz na $ 25 Kredit zdarma na GoWebben na stránce nastavení.
  • Testováno na WordPress 4.3.
  • Aktualizovaný soubor Readme.

2.1.7

  • Testováno na WordPress 4.0 a přidány ikony pluginu pro nové rozhraní.

2.1.6

  • Přidána chybějící závislost jQuery v /functions/enqueue.php (Upozornil walbach) – načítal SVG Podporu JS před jQuery.

2.1.5

  • Přidán srbský překlad, předložil Ogi Djuraskovic.

2.1.4

  • Opravený odkaz na nastavení pluginu (na stránce pluginů)
  • Přidány další odkazy – Podpora & Darovat
  • Stránka nastavení byla trochu upravena
  • Vyčištěná stránka nastavení pomocí CSS
  • Trochu jsem uspokojil své tendence k OCD

2.1.3

  • Přidán soubor plugin_action_links pro vlastní nabídky na stránce pluginu.

2.1.2

  • Vyčištěný kmen, tagy a soubor readme.txt, aby se zobrazil správný seznam změn a upozornění na aktualizaci.

2.1.1

  • Opravený podmíněný soubor JS – pracoval v místním testování, ale ne živě.

2.1

  • Aktualizace jazykových souborů pro lokalizaci.

2.0

  • Přidána stránka nastavení správce s pokyny a možnostmi omezení pouze na použití správcem a nastavení vlastní cílové třídy CSS.
  • Celý plugin byl kompletně přepsán a nově strukturován.
  • Přidána možnost omezit nahrávání SVG pouze na správce.
  • Přidáno pole pro vlastní cílovou třídu CSS.
  • Přidána šablona stylů na stránku nastavení správce.

1.0

  • První vydání.