- XF Compatibility
- 2.0.x
- 2.1.x
- 2.2.x
- Headline
- Depending on configuration, this add-on requires webserver URL rewrite support!
- Short Description
- FREE Download Premium and Nulled SVG Template by Xon 2.6.0 version from NullPro Community. It is zip Extention type and 35.1 KB File size. From SVG Template by Xon have 15 discussion, 15 Updates, 352 Views.
Require Standard Library By Xon v1.12.0+
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!) ;
Ubuntu (using https://launchpad.net/~ondrej/+archive/ubuntu/php PPA);
Code:
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.
Configure Render using proc_open option with;
{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
Configure CLI PIPE command with;
Less:
Explicit usage in templates;
ie, should look similar to;
Contributing features or bug fixes
Please create a Github Pull request via the "More Information" link.
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.04Compiling
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
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 clientsLess:
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 TemplatesNginx 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.