2

estoy realizando un proyecto donde creo un carnet con la liberia Fabric, de alli lo exporto en forma de SVG y me da el siguiente codigo:

'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="318" height="500" viewBox="0 0 318 500" xml:space="preserve">
<desc>Created with Fabric.js 5.3.0</desc>
<defs>
</defs>
<g transform="matrix(1 0 0 1 0 0)"  >
</g>
<g transform="matrix(3.76 0 0 3.76 204.3 159.33)" style=""  >
        <text xml:space="preserve" font-family="Times New Roman" font-size="20" font-style="normal" font-weight="bold" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-27.22" y="6.28" >accion</tspan></text>
</g>
<g transform="matrix(-0.15 0.7 -0.7 -0.01 22.82 126.51)" style=""  >
        <text xml:space="preserve" font-family="Times New Roman" font-size="40" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-65.54" y="12.57" >Nombre</tspan></text>
</g>
<g transform="matrix(0.71 0 0 0.71 154.37 271.38)" style=""  >
        <text xml:space="preserve" font-family="Times New Roman" font-size="40" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-52.19" y="12.57" >cedula</tspan></text>
</g>
</svg>'

Lo que quisiera es tranformar este codigo SVG en una imagen para guardarla en un directorio, cosa que no he logrado. Probe con codigo nativo de nativo de php

libxml_use_internal_errors(true);

$codigo_svg = 'MI_SVG';

// Crear la imagen vacía
$imagen = imagecreatetruecolor(1280, 720);

// Cargar la imagen desde el SVG
$imagen_fondo = imagecreatefromjpeg('https://cdn.pixabay.com/photo/2017/12/15/13/51/polynesia-3021072_1280.jpg');

// Dibujar la imagen de fondo
imagecopy($imagen, $imagen_fondo, 0, 0, 0, 0, 1280, 720);

// Dibujar los textos
$color_texto = imagecolorallocate($imagen, 0, 0, 0);

// Crear un objeto SimpleXML a partir del código SVG
$xml = simplexml_load_string($codigo_svg);

foreach ($xml as $obj) {

    // Validamos que exista texto
    if (isset($obj->text)) {

        // [4] = x ; [5] = y
        $coordinates = explode(" ", $obj["transform"]);


        $x = (float) $coordinates[4];
        $y = (float) $coordinates[5];
        // $x = (float) $obj->text->tspan["x"];
        // $y = (float) $obj->text->tspan["y"];
        $contenido = (string) $obj->text->tspan;


        // // Cargar la fuente
        $fuente = 'Roboto.ttf';

        // // Dibujar el texto
        imagettftext($imagen, 40, 0, $x, $y, $color_texto, $fuente, $contenido);

    }
}

// Guardar la imagen en un archivo PNG
imagepng($imagen, 'MI NOMBRE DE ARCHIVO');

pero no lo genera completamente, puede recrearlo pero no con las mismas caracteristicas de por ejemplo, la rotacion de un texto.

Estoy probando con la liberia PHP-SVG, pero esta nisiquiera logrA mostrar nada, este fue el codigo que use

error_reporting(E_ALL);
ini_set('display_errors', 1);
require __DIR__ . '/vendor/autoload.php';

use SVG\SVG;

$svg = 'MI_SVG';


header('Content-Type: image/png');
imagepng( $image->toRasterImage(318, 500) );

Y ya no se que mas puedo intentar... Escucho sus sugerencias, saludos!

3
  • lee un poco por aca: metacpan.org/pod/Image%3A%3AMagick
    – John
    Commented el 21 jun. 2023 a las 3:50
  • ¿Por qué quieres hacer esto del lado del servidor? Si vas a usar la imagen para incluirla en la página, puedes incluir directamente el código SVG y que sea el navegador el que se encargue de dibujarlo.
    – jachguate
    Commented el 21 jun. 2023 a las 6:15
  • La cosa es que necesito la imagen en archivo, para que esa imagen generada a partir del svg la descargue una app
    – Post Man
    Commented el 22 jun. 2023 a las 13:15

2 respuestas 2

2

Puedes hacer que el navegador se encargue de dibujar la imagen representada por el SVG.

Te dejo este ejemplo de cómo colocarlo con javascript del lado del cliente, pero sería más o menos equivalente incluirlo directamente desde el servidor en un elemento <img>.

const svgCarnet = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="318" height="500" viewBox="0 0 318 500" xml:space="preserve">
<desc>Created with Fabric.js 5.3.0</desc>
<defs>
</defs>
<g transform="matrix(1 0 0 1 0 0)"  >
</g>
<g transform="matrix(3.76 0 0 3.76 204.3 159.33)" style=""  >
        <text xml:space="preserve" font-family="Times New Roman" font-size="20" font-style="normal" font-weight="bold" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-27.22" y="6.28" >accion</tspan></text>
</g>
<g transform="matrix(-0.15 0.7 -0.7 -0.01 22.82 126.51)" style=""  >
        <text xml:space="preserve" font-family="Times New Roman" font-size="40" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-65.54" y="12.57" >Nombre</tspan></text>
</g>
<g transform="matrix(0.71 0 0 0.71 154.37 271.38)" style=""  >
        <text xml:space="preserve" font-family="Times New Roman" font-size="40" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-52.19" y="12.57" >cedula</tspan></text>
</g>
</svg>
`

//document.documentElement.innerHTML = svgCarnet;

const contenedor = document.getElementById("contenedor");

var mysvg = new Image();
mysvg.src = 'data:image/svg+xml,' + escape(svgCarnet);
    
contenedor.appendChild(mysvg);
<div id="contenedor"></div>

2
  • La "desventaja" de hacerlo así es la imposibilidad de que el navegador ponga en cache el archivo. La ventaja... que el navegador no ponga en cache el archivo xD
    – Marcos
    Commented el 21 jun. 2023 a las 18:34
  • Seria util pero la cosa es que necesito la imagen en archivo, para que esa imagen generada a partir del svg la descargue una app
    – Post Man
    Commented el 22 jun. 2023 a las 13:15
0

Podes hacerlo creando el archivo SVG e ingresando el contenido del mismo.

Ejemplo:

<?php

// Codigo del SVG
$codigo_svg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="318" height="500" viewBox="0 0 318 500" xml:space="preserve">
<desc>Created with Fabric.js 5.3.0</desc>
<defs></defs>
<g transform="matrix(1 0 0 1 0 0)"></g>
<g transform="matrix(3.76 0 0 3.76 204.3 159.33)" style="">
    <text xml:space="preserve" font-family="Times New Roman" font-size="20" font-style="normal" font-weight="bold" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-27.22" y="6.28" >accion</tspan></text>
</g>
<g transform="matrix(-0.15 0.7 -0.7 -0.01 22.82 126.51)" style="" >
    <text xml:space="preserve" font-family="Times New Roman" font-size="40" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-65.54" y="12.57" >Nombre</tspan></text>
</g>
<g transform="matrix(0.71 0 0 0.71 154.37 271.38)" style="">
    <text xml:space="preserve" font-family="Times New Roman" font-size="40" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-52.19" y="12.57" >cedula</tspan></text>
</g>
</svg>';

// Nombre del archivo
$file_svg = 'mi_svg.svg';

// Agregamos el encabezado
$codigo_svg = '<?xml version="1.0" encoding="utf-8"?>' . $codigo_svg;

// Creamos el archivo
file_put_contents($file_svg, $codigo_svg);

Mas ínfo:

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.