SVG Plantilla de Xon 2.7.0

Compatibilidad con XF

2.3.x
2.2.x

Descripción breve: XenForo 2 SVG Template Add-on v1.12.0+: Allows storing and generating SVG templates for easy image management. Supports URL rewriting for clean URLs and rendering to PNG using CLI or pre-compiled binaries like php-imagick, resvg, and Inkscape. Compatible with XenForo 2 routing system via Nginx/Apache rewrite rules.

RequiereStandard Library By Xonv1.12.0+
Dependiendo de la configuración, este complemento requiere el soporte del reescritura de URLs del servidor web!

SVG Template

Dependiendo de la configuración, este complemento requiere el soporte del reescritura de URLs del servidor web!
Permite almacenar imágenes SVG como plantillas. Esto crea un nuevo archivo svg.php en el directorio raíz de XF.
Para generar una URL a una plantilla SVG (La plantilla debe tener .svg al final del nombre!) ;

Código:

{{ 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 a PNG

Renderizar SVGs a PNGs requiere soporte externo y dependiendo del sistema operativo esto puede resultar en limitaciones o renderizado deficiente.

php-imagick-soporte

Esno recomendadouso de Imagick si es posible!
Ubuntu (usando )https://launchpad.net/~ondrej/+archive/ubuntu/phpPPA); Code:

Código:

sudo apt install php7.4-imagick libmagickcore-6.q16-3-extra
sudo systemctl restart php7.4-fpm

Nota; algunas distribuciones requieren que se instale libmagickcore-6.q16-3-extra para habilitar el soporte para SVG. Versiones antiguas de Imagick tienen un soporte pobre para SVG, además de su reputación mala en seguridad.

Soporte CLI

Este es un escape huevo genérico para instalar conversión arbitraria de PNG, utilizando proc_open en PHP.
Configura Render usando la opción proc_open.
<CLI-binary> {destFile} {sourceFile}
{sourceFile} es el archivo SVG temporal {destFile} es el archivo PNG destino en formato temporal
Alternativamente, la entrada/salida puede realizarse a través de pipes
Nota; los nombres de plantillas son solo cadenas alfanuméricas, lo cual se asegura por validación antes de que se llame la opción CLI

support para resvg CLI

Ejemplo usandoresvgconfigura comando de línea de comandos con;

Código:

/usr/local/bin/resvg --quiet {sourceFile} {destFile}

Binario precompilado

Binario pre-compilado Linux x86_64 ha sido hecho disponiblehereCompilado en CentOS 7, funciona en Ubuntu 18.04/20.04.

Compilando

La compilación puede vincularse con versiones más recientes de glibc, lo que puede causar problemas deportabilidad.

Código:

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

Soporte de CLI para Inkscape

Nota; usa snap ya que probablemente tenga una instancia muy antigua!

Código:

sudo snap install inkscape

Configura comando PIPE de la línea de comandos con;

Código:

inkscape --export-type=png -p

Características

Renderings condicionales SVG a PNG (para CSS/LESS)

Un ejemplo de CSS condicional para usar un png sobre un svg para clientes móviles

Código:

.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>
}
}

Uso explícito en plantillas;

Código:

<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 integración de rutas

Mientras que las reglas de reescritura del servidor web son recomendadas, este complemento soporta la extensión del sistema de rutas de XenForo para proporcionar un soporte sin configuración para plantillas SVG

Configuración de reescritura de URL Nginx

Código:

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

Configuración de Rewrite URL Apache

Agregar la instrucción antes del archivo final index.php;

Código:

    RewriteRule ^data/svg/([^/]+)/([^/]+)/([^/]+)/([^\.]+\..*)$ svg.php?svg=$4&s=$1&l=$2&d=$3 [B,NC,L,QSA]

¡es, debería verse similar a;

Código:

    #    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 
    RewriteCond %{REQUEST_FILENAME} -l 
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ - 
    RewriteRule ^(data/|js/|styles/|install/|favicon\.ico|crossdomain\.xml|robots\.txt) - 
    RewriteRule ^data/svg/([^/]+)/([^/]+)/([^/]+)/([^\.]+\..*)$ svg.php?svg=$4&s=$1&l=$2&d=$3 [B,NC,L,QSA]
    RewriteRule ^.*$ index.php

Contribuyentes de características o correcciones de erroresPor favor crea un pedido de integración en GitHub mediante la opción "Más información".

SVG Plantilla de Xon 2.7.0

Últimas actualizaciones

Más recursos de anne51

Recursos similares