Home > Software engineering >  Return svg from laravel route?
Return svg from laravel route?

Time:09-17

I have a function that generates an SVG using EasySVG from custom text and a specified font. I'd like to be able to generate these things using an expressed url such as /customsvg/MYTEXT.svg in laravel.

I know how to add a route that looks like '/customsvg/{text}' but I'm not sure how to actually handle the request in a controller so it spits out the svg data with the proper mime types and in the proper format. (does it need to be base64 encoded for example? It's all path data)

CodePudding user response:

First, create a controller and a main method (let's call it index). Make sure that inside the method you also set the proper header of the response. Then, simply return the view which contains the SVG data. Using the example below, you can also paste the text parameter or the generated SVG to the view.

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class SVGController extends Controller
{
    public function index(Request $request)
    {

        header('Content-type: image/svg xml');            
        $text = $request->input('text');
        $generatedSvg = ...
        return view("customsvg", compact('text', 'generatedSvg'));

    }
}

The customsvg view should look like this:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<!-- Your content goes here. Use the {{$text}} and {{$generatedSvg}} variables as you wish. -->
</svg>

Finally, make sure that your rute is properly set up.

Route::get('/customsvg/{text}', [SVGController::class, 'index']);

CodePudding user response:

(see comments on response by Hodorogea)

I found two ways of handling it. One in the Route itself since I use a single function call to handle the response and don't need a lot of sanitizing of input.

// example right in the routing including a color parameter
Route::get('/colorsvg/{color}/{filename}', function($color,$filename) {
    // remove any .svg suffix on the text
    $custom = preg_replace('/\.svg$/i', '', $filename);
    // add # on the front of numeric RGB values if needed
    if(preg_match('/^[a-fA-F\d]{6}$/', $color)) $color = '#' . $color;

    // function returns array with width, height and svgdata
    $svg = SDKapi::getCustomTextAsSvg($custom, $color);

    return response($svg['svgdata'], 200)
        ->header('Content-Type','image/svg xml');
});

or using a simple controller method (no color in this one)

api.php in routes:

Route::get('/customsvg/{filename}', [SVGController::class, 'customsvg']);

SVGController.php

public function customsvg(Request $request, $filename)
{
    $custom = preg_replace('/\.svg$/i', '', $filename);
    $svg = SDKapi::getCustomTextAsSvg($custom);
    return response($svg['svgdata'], 200)
        ->header('Content-Type', 'image/svg xml');;
}

enter image description here

  • Related