- Language
- English
- Compatible XF 2.x versions
- 2.2
- 2.3
- Additional requirements
- php 7.2+
Standard Library by Xon v1.20.0+ (free)
If installed: Redis Cache addon v2.17.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!) ;
Code:
Under Board information, if "Use Full Friendly URLs" (useFriendlyUrls) is set the URL generated is:
Code:
Otherwise
Code:
Ubuntu (using https://launchpad.net/~ondrej/+archive/ubuntu/php PPA);
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;
Code:
{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
Code:
Example using resvg, configure CLI command with;
Code:
Code:
Configure CLI PIPE command with;
Code:
Explicit usage in templates;
Code:
ie, should look similar to;
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:
sudo apt install php7.4-imagick libmagickcore-6.q16-3-extra
sudo systemctl restart php7.4-fpmNote; 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;
Code:
<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 v0.35.0+, configureCLI - Pipe command with;Code:
/usr/local/bin/resvg --quiet --resources-dir=/tmp/ - -cExample 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/22.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/resvgInkscape CLI support
Note; use snap as otherwise it is likely to have too old an instance!Code:
sudo snap install inkscapeConfigure CLI PIPE command with;
Code:
inkscape --export-type=png -pFeatures
Conditional rendering SVGs to PNG (for CSS/LESS)
An example of conditional CSS to use the png over the svg for mobile clients
Less:
.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;
XML:
<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/svg/([^/]+)/([^/]+)/([^/]+)/([^\.]+\..*)$ svg.php?svg=$4&s=$1&l=$2&d=$3 [B,NC,L,QSA]
RewriteRule ^(data/|js/|styles/|install/|favicon\.ico|crossdomain\.xml|robots\.txt) - [NC,L]
RewriteRule ^.*$ index.php [NC,L]
![[SVG] Robot Avatar](https://data.staraddons.store/resource_icons/0/474.jpg?1767338163){kind=icon}
![[SVG] subNodes Column](https://data.staraddons.store/resource_icons/0/649.jpg?1769040440){kind=icon}
![[SVG] Social Media Button](https://data.staraddons.store/resource_icons/0/967.jpg?1773683453){kind=icon}
![[SVG] Visitor Panel](https://data.staraddons.store/resource_icons/0/633.jpg?1768951088){kind=icon}