Return svg from laravel route?

userqMr3 0
Viewed 34

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)

svg routes php laravel
2 Answers

(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

userqMr30

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']);
Hodorogea Alexandru0
Related