Thumb of SVG not working

The CMS Questions
1

Hi,

I have the following code to go through all my images for an blog post:

<a href="<?php echo $img->url() ?>" alt="<?php echo $img->title() ?>">
     <?php echo thumb($img, array('height' => 200, 'width' => 200, 'crop' => true, 'quality' => 90)) ?>
 </a>

For SVG vector images thumb returns nothing. What would be the quickest way to circumvent this behavior?

Daniel

1 Like
2

IMHO, the easiest way would be to look for the image’s extension. If it is svg, link to the original file. Otherwise, create a thumbnail. Just be careful, not to upload SVG files of several megabytes. :wink:

<a href="<?php echo $img->url() ?>" alt="<?php echo $img->title() ?>">
    <?php if ($img->extension() === 'svg'): ?> 
        <img src="<?php echo $img->url() ?>" alt="">
    <?php else: ?>
        <?php echo thumb($img, array('height' => 200, 'width' => 200, 'crop' => true, 'quality' => 90)) ?>
    <?php endif ?>
 </a>
3 Likes
3

Hi,
if you use SVG it is not necessary to create thumbnails. You can resize the SVG directly and with another advantage, only with one http-request.
The lossless resizing of vectorgrafics are the biggest advantage of this filetype.
Delete the width and height attributes inside your SVG to get an SVG with automatic 100% size to the parentelement.
Than you can style the anker or the svg direct through css:
.svgthumb { width: 200px; height: 200px; }

<a class="svgthumb" href="<?php echo $img->url() ?>" alt="<?php echo $img->title() ?>"> <?php echo f::read('yoursvg.svg')?> </a>
or directly inside the svg
<svg class="">…</svg>

Cheers

1 Like