Using hugo the modify svg's?

support
1

Hi there,

i am trying to use hugo to generate static svg files which can take the value such as {{ $rating := 4.5 }} and generate 4 yellow stars and 1 half yellow and half grey star.

modifying svg and filling the a shape partially can be done like this css - Outlining and partially filling an SVG Shape - Stack Overflow

Now is there a way to tell hugo to generate the static svg’s of the star rating. i try different code but didn’t succeed any help will be greatly appreciated.

thanks

Some code that i try in hugo to make it work

1st attempt to simply show full number value such as 1,2,3,4 and 5 work without any fractional values such as 4.5

<div class="flex items-center xl:col-span-1">
<div class="flex items-center">
{{ $rating := 4.9 }} <!-- Replace this with your actual rating variable -->
{{ $filledStars := div $rating 1 | int }}
{{ $halfStar := ne (mod $rating 1) 0 }}
            
{{ range seq 0 4 }}
{{ $starIndex := . }}
<svg class="h-5 w-5 flex-shrink-0 {{ if ge $starIndex $filledStars }}{{ if $halfStar }}text-yellow-400{{ else }}text-gray-200{{ end }}{{ else }}text-yellow-400{{ end }}" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
</svg>
{{ end }}
</div>
<p class="ml-3 text-sm text-gray-700">{{ $rating }}<span class="sr-only"> out of 5 stars</span></p>
</div>

another code which didnt work

<div class="flex items-center xl:col-span-1">
<div class="flex items-center">
{{ $rating := 4.5 }} <!-- Replace this with your actual rating variable -->
            
{{ range seq 0 4 }}
{{ $starIndex := . }}
{{ $starValue := div (mul $starIndex 10) 2 }}
{{ $starFill := "gray" }}
            
{{ if ge $rating $starValue }}
{{ $starFill = "yellow" }}
{{ else if and (gt $rating (sub $starValue 1)) (lt $rating $starValue) }}
{{ $starFill = "url(#fillpartial)" }}
{{ end }}
            
<svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<defs>
<clipPath id="fillpartial-{{ $starIndex }}">
<polygon points="10,1 12.755,6.2 19.511,7.8 14.255,12.4 15.755,19 10,15 4.245,19 5.745,12.4 0.489,7.8 7.245,6.2"></polygon>
</clipPath>
</defs>
<polygon clip-path="url(#fillpartial-{{ $starIndex }})" fill="{{ $starFill }}" stroke="red" points="10,1 12.755,6.2 19.511,7.8 14.255,12.4 15.755,19 10,15 4.245,19 5.745,12.4 0.489,7.8 7.245,6.2"></polygon>
</svg>
{{ end }}
</div>
<p class="ml-3 text-sm text-gray-700">{{ $rating }}<span class="sr-only"> out of 5 stars</span></p>
</div>
2

I’d use five svg files and five CSS classes. That’s far simpler than having Hugo generate the same SVG over and over again.

3

Hi @chrillek

As you can se in the above examples hugo can easily calculate the score and svg allow us to fill the star accordingly. if hugo directly apply the fill or even better if i have from 0 to 1.0, 10 different stars and tell hugo to simply use the apropriate svg that will work the best in my use case instead of using css.

As there is 0 css in my project it is generating pure html which let users see how the html is being rendered in each browser.

Thanks

4

I have no doubt that Hugo can calculate and that SVG can draw stars. I was simply questioning the idea to calculate the same stars over and over again instead of simply doing it once, saving them in a file and then displaying the appropriate files.

5

what you mean?