SVG Template by Xon

SVG Template by Xon 2.6.1

No permission to download
XF Compatibility
  1. 2.0.x
  2. 2.1.x
  3. 2.2.x
Headline
Depending on configuration, this add-on requires webserver URL rewrite support!
Short Description
Download and Discuss Premium, BusinessSVG Template by Xon 2.6.1 version on NullPro Community. It is zip Extention type and 35.3 KB File size. From SVG Template by Xon have 16 discussion, 16 Updates, 376 Views.
Require Standard Library By Xon v1.12.0+

Depending on configuration, this add-on requires webserver URL rewrite support!

SVG Template​

Depending on configuration, this add-on requires webserver URL rewrite support!

Allows SVG (Scalable Vector Graphics) images to be stored as templates. This creates a new svg.php file in the XF root directory.

To generate a link to an SVG template (The template must have .svg at the end of the name!) ;

Code:
{{ getSvgUrl('tempate.svg') }}
Under Board information, if "Use Full Friendly URLs" (useFriendlyUrls) is set the URL generated is:
Code:
/data/svg/<style_id>/<langauge_id>/<style_last_modified>/<templateName.svg>
Otherwise
Code:
svg.php?svg=<templateName>&s=<style_id>&l=<langauge_id>&d=<style_last_modified>

Render to PNG​

Rendering SVGs to PNGs requires external support, and depending on OS this may result in odd limitations or poor rendering.

php-imagick support​

It is not recommended to use Imagick if it can be helped!

Ubuntu (using https://launchpad.net/~ondrej/+archive/ubuntu/php PPA);
Code:
Code:
sudo apt install php7.4-imagick libmagickcore-6.q16-3-extra
sudo systemctl restart php7.4-fpm

Note; some distro's require libmagickcore-6.q16-3-extra to be installed to enable SVG support.

Older versions of Imagick have poor SVG support, on top of Imagick's poor security reputation.

CLI support​

This is a generic escape hatch to plug in arbitrary png conversion, using proc_open in php.

Configure Render using proc_open option with;
<CLI-binary> {destFile} {sourceFile}

{sourceFile} is the source SVG written as a temp file {destFile} is the destination PNG file as a temp file

Alternatively input/output can be done via pipes

Note; template names are only alpha-numeric strings, which is enforced by validation before the CLI option is called

resvg CLI support​

Example using resvg, configure CLI command with;
Code:
/usr/local/bin/resvg --quiet {sourceFile} {destFile}

Precompiled binary​

Pre-compiled linux x86_64 binary has been made available here. Compiled on CentOS 7, works on Ubuntu 18.04/20.04

Compiling​

Compiling may bind to newer versions of glibc which can cause portability issues

Code:
curl https://sh.rustup.rs -sSf | sh
source $HOME/.cargo/env
cargo install resvg
cp ~/.cargo/bin/resvg /usr/local/bin/resvg
chmod +x /usr/local/bin/resvg

Inkscape CLI support​

Note; use snap as otherwise it is likely to have too old an instance!

Code:
sudo snap install inkscape
Configure CLI PIPE command with;

Code:
inkscape --export-type=png -p

Features​

Conditional rendering SVGs to PNG (for CSS/LESS)​

An example of conditional CSS to use the png over the svg for mobile clients
Less:
Code:
.mod_interrupt--svg.mod_interrupt
{
&--stop
{
&:before
{
content: url({{ getSvgUrl('sv_bbcode_modinterrupt_stop.svg') }}) !important;
}
<xf:if is="$xf.svg.as.png">
        .is-tablet &:before,
        .is-mobile &:before
{
content: url({{ getSvgUrlAs('sv_bbcode_modinterrupt_stop.svg', 'png') }}) !important;
}
</xf:if>
}
}

Explicit usage in templates;

Code:
<xf:if is="$xf.svg.enabled">
<xf:if is="$xf.svg.as.png and $xf.mobileDetect and $xf.mobileDetect.isMobile()">
<img src="{{ getSvgUrlAs('example.svg', 'png') }}"/>
<xf:else />
<img src="{{ getSvgUrlAs('example.svg', 'svg') }}"/>
</xf:if>
<xf:else />
<i class="fa fa-stop" />
</xf:if>

XenForo 2 routing integration​

While webserver rewrite rules are recommended, this add-on supports extending XenForo's routing system to provide zero-configuration support for SVG Templates

Nginx URL rewrite config​


Code:
location ^~ /data/svg/ {
   access_log off;
   rewrite ^/data/svg/([^/]+)/([^/]+)/([^/]+)/([^\.]+\..*)$ /svg.php?svg=$4&s=$1&l=$2&d=$3$args last;
   return 403;
}

Apache URL rewrite config​

Add the rule before the final index.php;
Code:
    RewriteRule ^data/svg/([^/]+)/([^/]+)/([^/]+)/([^\.]+\..*)$ svg.php?svg=$4&s=$1&l=$2&d=$3 [B,NC,L,QSA]

ie, should look similar to;

Code:
    #    If you are having problems with the rewrite rules, remove the "#" from the
    #    line that begins "RewriteBase" below. You will also have to change the path
    #    of the rewrite to reflect the path to your XenForo installation.
    #RewriteBase /xenforo
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ - [NC,L]
    RewriteRule ^(data/|js/|styles/|install/|favicon\.ico|crossdomain\.xml|robots\.txt) - [NC,L]
    RewriteRule ^data/svg/([^/]+)/([^/]+)/([^/]+)/([^\.]+\..*)$ svg.php?svg=$4&s=$1&l=$2&d=$3 [B,NC,L,QSA]
    RewriteRule ^.*$ index.php [NC,L]


Contributing features or bug fixes
Please create a Github Pull request via the "More Information" link.
Author
anne51
Views
376
Extention type
zip
File size
35.3 KB
First release
Last update
Ratings 0.00 star(s) 0 ratings
Link was Broken? Please  Send Message to NP Team with Ticket, You will get it very quickly!
Support Developer If you are satisfied with your test or project have earn money successfully, Maybe you can click more information button to support with buying.
More resources from anne51
Webcraftic Robin imagе optimizer
Webcraftic Robin imagе optimizer
MAKE YOUR WORDPRESS SITE BLAZINGLY FAST AND RANK HIGHER IN SEARCH ENGINES.
Demo Builder for any WordPress Product
Demo Builder for any WordPress Product
help you present key benefits of your products via custom front-end demos
MPC AI ChatBot
MPC AI ChatBot
Streamline your business with a chatbot that manages invoices, proposals, and customer interactions
Glozin - Multipurpose Shopify Theme OS
Glozin - Multipurpose Shopify Theme OS
Glozin Shopify Theme by Nextsky allows you to create a site
Website Review
Tested Website Review
Website Review is a free SEO tool which provides you content analysis of the website.

Latest updates

  1. 2.6.1 - changelog
    Fix XF2.3 style variations support for getSvgUrl() in style properties
  2. 2.6.0 - changelog
    Requires StandardLib v1.19.0+ If installed, requires Redis Cache 2.17.0+ XF2.3...
  3. 2.5.2 - changelog
    Fix "[E_DEPRECATED] strlen(): Passing null to parameter #1 ($string) of type string is...
  4. 2.5.1 - changelog
    Fix internal server error being generated instead of a 404 when requesting an invalid svg
  5. 2.5.0 - changelog
    Require php 7.2+ Require StandardLib v1.18.0+ If using resvg support, recommend updating to...

Similar resources

[CinVin] Emoji Tweaks (use SVG images for emoji instead of PNG) J
a small add-on that will change the file extension of emoji images when served from a custom CDN
[SVG] Adblock Detected J
Everything is the same, in principle, with minor changes.
[SVG] CryptoPrice J
17 popular cryptocurrencies
Top