#svg — Public Fediverse posts

There isn't an element per slice. It's just one element for all slices going up on hover and then back down.

#CSS #SVG #filter

🆕 blog! “Stupidly Simple SVG Sparklines”

A sparkline is a little line-graph with no axes or other unnecessary details. They're useful for getting quick understanding of what the data is showing.

They're also really easy to create programmatically.

This uses the SVG "polyline" which takes a list of x,y co-ordinate pairs. But can you spot the small problem?

<svg…

👀 Read more: https://shkspr.mobi/blog/2026/05/stupidly-simple-svg-sparklines/
⸻
#svg #tutorial

Stupidly Simple SVG Sparklines

A sparkline is a little line-graph with no axes or other unnecessary details. They're useful for getting quick understanding of what the data is showing.

They're also really easy to create programmatically.

This uses the SVG "polyline" which takes a list of x,y co-ordinate pairs. But can you spot the small problem?

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 124">
    <polyline fill="none" stroke="#0074D955" stroke-width="3" 
        points="12,48 83,84 154,79 226,90 297,79 369,65 440,78 512,80 583,88 654,12 726,56 797,92 869,93 940,97 1012,106"></polyline>
</svg>

The SVG co-ordinate system has position 0,0 at the top left. Most graphics formats are like that. That's fine for our x value - but it means higher y values will appear lower on the graph.

Getting the x co-ordinate of each data point is easy. Take the width of the SVG image and divide it by the number of data-points.

The y co-ordinate is harder. The algorithm is:

1. Find the height of the SVG.
2. Find the maximum value in the data.
3. Find the minimum value in the data.
4. Divide the maximum value by the height of the graph.
5. For each data point, either:
   • To have the lowest value at the bottom of the graph, subtract the minimum from the value, then multiply by the ratio in (4).
   • Or, to retain the gap between zero and the lowest value, multiply the value by the ratio in (4).
6. The y co-ordinate is calculated by subtracting the value in (5) from the height in (1).

Here's some code showing how it works. I've added a little padding to the inside of the graph - you'll see why later:

//  Max and min of views.
$max_views = max( $svg_views_data );
$min_views = min( $svg_views_data );
$svg_data_length = sizeof( $svg_dates_data ) - 1;

//  SVG details for scaling.
$svg_padding = 12;
$svg_width_graph  = 1000;
$svg_width  = $svg_width_graph + ( $svg_padding * 2 );
$svg_height_graph = 100;
$svg_height = $svg_height_graph + ( $svg_padding * 2 );

//  Calculate where each point should be.
$x_per = $svg_width_graph / ( $svg_data_length );
$y_per = $svg_height_graph / $max_views;

//  Loop through the data.
foreach ( $svg_views_data as $index=>$views ) {
    //  X is from the left.
    $x_pos = intval( $x_per * $index ) + $svg_padding;
    //  Y is from the top.
    $y_pos = $svg_height - intval( $y_per * $views ) - $svg_padding;

    //  Add a point to the line.
    $polyline_points .= "{$x_pos},{$y_pos}\n";
}

echo <<< SVG
<svg xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 $svg_width $svg_height" class="chart">
    <polyline
        fill="none"
        stroke="#F00"
        stroke-width="3"
        points="{$polyline_points}"/>
</svg>
SVG;

Suppose someone suggests stupidly simple sparklines suffer seriously so someone should supplement statistics several circles?

Using the same co-ordinates, we can place an SVG circle on top of the point. Give it a "title" attribute and you have a little bit of interactivity.

<circle cx="12" cy="48" r="5" fill="#0074D955"><title>4,707 Views</title></circle>

Here's how it looks (view source to understand how it is constructed).

Hover over any of those little circles and you'll see some pop-up text giving you information about that datapoint.

…that's it! If you have an array of data points, you can easily create a graph with no graphing library, no plugins, no 3rd party dependencies. Just super simple SVG.

#Development #Releases
WebKit features for Safari 26.5 · “The biggest May release of WebKit yet.” https://ilo.im/16curb

_____
#Safari #Browser #WebKit #APIs #WebDev #Frontend #SVG #HTML #CSS #JavaScript

#Development #Releases
WebKit features for Safari 26.5 · “The biggest May release of WebKit yet.” https://ilo.im/16curb

_____
#Safari #Browser #WebKit #APIs #WebDev #Frontend #SVG #HTML #CSS #JavaScript

#Development #Releases
WebKit features for Safari 26.5 · “The biggest May release of WebKit yet.” https://ilo.im/16curb

_____
#Safari #Browser #WebKit #APIs #WebDev #Frontend #SVG #HTML #CSS #JavaScript

#Development #Releases
WebKit features for Safari 26.5 · “The biggest May release of WebKit yet.” https://ilo.im/16curb

_____
#Safari #Browser #WebKit #APIs #WebDev #Frontend #SVG #HTML #CSS #JavaScript

#News #Motorsports #Autosports #Nascar #Nascar2026 #CupSeries
https://www.youtube.com/watch?v=laxcGBfCXVc

#SVG #97 Humiliates Americans!

#News #Motorsports #Autosports #Nascar #Nascar2026 #CupSeries
https://www.youtube.com/watch?v=laxcGBfCXVc

#SVG #97 Humiliates Americans!

#News #Motorsports #Autosports #Nascar #Nascar2026 #CupSeries
https://www.youtube.com/watch?v=laxcGBfCXVc

#SVG #97 Humiliates Americans!

#News #Motorsports #Autosports #Nascar #Nascar2026 #CupSeries
https://www.youtube.com/watch?v=laxcGBfCXVc

#SVG #97 Humiliates Americans!

[Перевод] Claude Code: почему HTML лучше Markdown

Markdown стал стандартным форматом для общения агентов с разработчиком. Простой, портативный, поддерживает базовое форматирование, легко редактируется. Claude даже научился делать ASCII-диаграммы внутри markdown-файлов. Но по мере того, как агенты становятся мощнее, markdown начинает ощущаться тесным. Файл длиннее ста строк уже трудно читать. Хочется нормальных визуализаций, цвета, диаграмм — и возможности легко поделиться результатом. К тому же я всё реже редактирую эти файлы руками. Чаще использую их как спецификации, референсы, брейнсторм-артефакты. Когда правки нужны, их вносит Claude — и тогда одно из главных преимуществ markdown исчезает. Я перешёл на HTML как основной выходной формат. Вот почему. (примеры можно посмотреть здесь: https://thariqs.github.io/html-effectiveness — возвращайтесь читать дальше)

https://habr.com/ru/articles/1033326/

#markdown #HTML #Claude_Code #AIагенты #формат_вывода #интерактивные_документы #SVG #спецификации #code_review #информационная_плотность

[Перевод] Claude Code: почему HTML лучше Markdown

Markdown стал стандартным форматом для общения агентов с разработчиком. Простой, портативный, поддерживает базовое форматирование, легко редактируется. Claude даже научился делать ASCII-диаграммы внутри markdown-файлов. Но по мере того, как агенты становятся мощнее, markdown начинает ощущаться тесным. Файл длиннее ста строк уже трудно читать. Хочется нормальных визуализаций, цвета, диаграмм — и возможности легко поделиться результатом. К тому же я всё реже редактирую эти файлы руками. Чаще использую их как спецификации, референсы, брейнсторм-артефакты. Когда правки нужны, их вносит Claude — и тогда одно из главных преимуществ markdown исчезает. Я перешёл на HTML как основной выходной формат. Вот почему. (примеры можно посмотреть здесь: https://thariqs.github.io/html-effectiveness — возвращайтесь читать дальше)

https://habr.com/ru/articles/1033326/

#markdown #HTML #Claude_Code #AIагенты #формат_вывода #интерактивные_документы #SVG #спецификации #code_review #информационная_плотность

[Перевод] Claude Code: почему HTML лучше Markdown

Markdown стал стандартным форматом для общения агентов с разработчиком. Простой, портативный, поддерживает базовое форматирование, легко редактируется. Claude даже научился делать ASCII-диаграммы внутри markdown-файлов. Но по мере того, как агенты становятся мощнее, markdown начинает ощущаться тесным. Файл длиннее ста строк уже трудно читать. Хочется нормальных визуализаций, цвета, диаграмм — и возможности легко поделиться результатом. К тому же я всё реже редактирую эти файлы руками. Чаще использую их как спецификации, референсы, брейнсторм-артефакты. Когда правки нужны, их вносит Claude — и тогда одно из главных преимуществ markdown исчезает. Я перешёл на HTML как основной выходной формат. Вот почему. (примеры можно посмотреть здесь: https://thariqs.github.io/html-effectiveness — возвращайтесь читать дальше)

https://habr.com/ru/articles/1033326/

#markdown #HTML #Claude_Code #AIагенты #формат_вывода #интерактивные_документы #SVG #спецификации #code_review #информационная_плотность

[Перевод] Claude Code: почему HTML лучше Markdown

Markdown стал стандартным форматом для общения агентов с разработчиком. Простой, портативный, поддерживает базовое форматирование, легко редактируется. Claude даже научился делать ASCII-диаграммы внутри markdown-файлов. Но по мере того, как агенты становятся мощнее, markdown начинает ощущаться тесным. Файл длиннее ста строк уже трудно читать. Хочется нормальных визуализаций, цвета, диаграмм — и возможности легко поделиться результатом. К тому же я всё реже редактирую эти файлы руками. Чаще использую их как спецификации, референсы, брейнсторм-артефакты. Когда правки нужны, их вносит Claude — и тогда одно из главных преимуществ markdown исчезает. Я перешёл на HTML как основной выходной формат. Вот почему. (примеры можно посмотреть здесь: https://thariqs.github.io/html-effectiveness — возвращайтесь читать дальше)

https://habr.com/ru/articles/1033326/

#markdown #HTML #Claude_Code #AIагенты #формат_вывода #интерактивные_документы #SVG #спецификации #code_review #информационная_плотность

Just a heads up, Safari & Firefox struggled with this one at full size. They render the background fine, but the filters I used to get the painted effect on the large text seem to be asking a lot of them, and they kind of just give up. Chrome does OK, because I think it uses GPU acceleration to render SVGs, where the other browsers don't.

#SVG #SVGFilter

Sometimes you have an idea but can't figure out the right way to execute it, so it just lives in your brain, always there, wanting to come out, and then, finally, after years, you figure out the right way to do it and BOOM! There it is.

The attached image is a png, but the original is an SVG, available here: https://github.com/TRezendes/SVGarden/blob/main/TPK/itsnotsnakes.svg

@TPK

#TPK #TotalPartyKill #FanArt #SVG #SVGarden #SVGFilter #ItsNotSnakes

Do Graphs and Charts Need to Be Accessible?, by @tempertemper:

https://www.tempertemper.net/blog/do-graphs-and-charts-need-to-be-accessible

#accessibility #png #svg #images #aria #informationdesign

Do Graphs and Charts Need to Be Accessible?, by @tempertemper:

https://www.tempertemper.net/blog/do-graphs-and-charts-need-to-be-accessible

#accessibility #png #svg #images #aria #informationdesign

Do Graphs and Charts Need to Be Accessible?, by @tempertemper:

https://www.tempertemper.net/blog/do-graphs-and-charts-need-to-be-accessible

#accessibility #png #svg #images #aria #informationdesign

Do Graphs and Charts Need to Be Accessible?, by @tempertemper:

https://www.tempertemper.net/blog/do-graphs-and-charts-need-to-be-accessible

#accessibility #png #svg #images #aria #informationdesign

Do Graphs and Charts Need to Be Accessible?, by @tempertemper:

https://www.tempertemper.net/blog/do-graphs-and-charts-need-to-be-accessible

#accessibility #png #svg #images #aria #informationdesign

I am thinking to do a “heatmap” of the muscles of the human body using #matplotlib. The idea is to have strength workouts point at different muscles and show that dynamically using matplotlib (see image). Maybe nuts not sure yet…

I was thinking to convert the #png to #svg and then with svgpath2mpl parse it to a matplotlib path (not sure yet if I can do more than one path) :

https://petercbsmith.github.io/marker-tutorial.html

Now, is there a better/easier way?

#python #svg #data #dataviz

#Elektrotrucker bei #Milence:

Wie die Zukunft des #Lkw-Ladens aussieht – #electrive #REPORTAGE

Vier Ladebuchten mit je bis zu 400 kW #Ladeleistung, ein #Batteriespeicher als #Netz-Booster und mitten auf einer der wichtigsten #Lkw-Achsen Europas: Milence eröffnete am #SVG #Autohof #Lohfeldener #Rüssel bei #Kassel seinen neuesten Ladepark für #elektrische #Trucks. Wir waren dabei!

#electrive

@electrive

https://m.youtube.com/watch?v=EMYwF9z4kzQ

#Elektrotrucker bei #Milence:

Wie die Zukunft des #Lkw-Ladens aussieht – #electrive #REPORTAGE

Vier Ladebuchten mit je bis zu 400 kW #Ladeleistung, ein #Batteriespeicher als #Netz-Booster und mitten auf einer der wichtigsten #Lkw-Achsen Europas: Milence eröffnete am #SVG #Autohof #Lohfeldener #Rüssel bei #Kassel seinen neuesten Ladepark für #elektrische #Trucks. Wir waren dabei!

#electrive

@electrive

https://m.youtube.com/watch?v=EMYwF9z4kzQ

#Elektrotrucker bei #Milence:

Wie die Zukunft des #Lkw-Ladens aussieht – #electrive #REPORTAGE

Vier Ladebuchten mit je bis zu 400 kW #Ladeleistung, ein #Batteriespeicher als #Netz-Booster und mitten auf einer der wichtigsten #Lkw-Achsen Europas: Milence eröffnete am #SVG #Autohof #Lohfeldener #Rüssel bei #Kassel seinen neuesten Ladepark für #elektrische #Trucks. Wir waren dabei!

#electrive

@electrive

https://m.youtube.com/watch?v=EMYwF9z4kzQ

#Elektrotrucker bei #Milence:

Wie die Zukunft des #Lkw-Ladens aussieht – #electrive #REPORTAGE

Vier Ladebuchten mit je bis zu 400 kW #Ladeleistung, ein #Batteriespeicher als #Netz-Booster und mitten auf einer der wichtigsten #Lkw-Achsen Europas: Milence eröffnete am #SVG #Autohof #Lohfeldener #Rüssel bei #Kassel seinen neuesten Ladepark für #elektrische #Trucks. Wir waren dabei!

#electrive

@electrive

https://m.youtube.com/watch?v=EMYwF9z4kzQ

#Elektrotrucker bei #Milence:

Wie die Zukunft des #Lkw-Ladens aussieht – #electrive #REPORTAGE

Vier Ladebuchten mit je bis zu 400 kW #Ladeleistung, ein #Batteriespeicher als #Netz-Booster und mitten auf einer der wichtigsten #Lkw-Achsen Europas: Milence eröffnete am #SVG #Autohof #Lohfeldener #Rüssel bei #Kassel seinen neuesten Ladepark für #elektrische #Trucks. Wir waren dabei!

#electrive

@electrive

https://m.youtube.com/watch?v=EMYwF9z4kzQ

Inkscape continua a migliorare con performance più fluide e nuove funzioni 🎨 #Inkscape #OpenSource #Grafica #SVG #Linux #Software

https://www.linuxeasy.org/inkscape-1-4-4-prestazioni-migliorate-editor-svg/?utm_source=mastodon&utm_medium=jetpack_social

𝗩𝘂𝗲 𝗨𝗻𝗶𝗰𝗼𝗻𝘀:

#Vuejs #Components #Icons #SVG #VueUnicons

https://thewhale.cc/posts/vue-unicons

1000+ Pixel-perfect svg unicons for your next project as Vue components.

#GenerativeArt interlude

Oh look! A kuwahara filter turning my photo into something painted.

#XQuery #SVG #CreativeCoding #HumanArt

#TIL You can set the `d` attribute value of a #SVG path element via #CSS. This means you can animate SVGs with pure CSS!

Docs:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/d

Article with demos:
https://www.joshwcomeau.com/animation/squash-and-stretch

#webdev #webdesign #vectorgraphics

#TIL You can set the `d` attribute value of a #SVG path element via #CSS. This means you can animate SVGs with pure CSS!

Docs:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/d

Article with demos:
https://www.joshwcomeau.com/animation/squash-and-stretch

#webdev #webdesign #vectorgraphics

#TIL You can set the `d` attribute value of a #SVG path element via #CSS. This means you can animate SVGs with pure CSS!

Docs:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/d

Article with demos:
https://www.joshwcomeau.com/animation/squash-and-stretch

#webdev #webdesign #vectorgraphics

#TIL You can set the `d` attribute value of a #SVG path element via #CSS. This means you can animate SVGs with pure CSS!

Docs:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/d

Article with demos:
https://www.joshwcomeau.com/animation/squash-and-stretch

#webdev #webdesign #vectorgraphics

#TIL You can set the `d` attribute value of a #SVG path element via #CSS. This means you can animate SVGs with pure CSS!

Docs:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/d

Article with demos:
https://www.joshwcomeau.com/animation/squash-and-stretch

#webdev #webdesign #vectorgraphics

🖼 Clker.com предоставляет сотни тысяч бесплатных клип-артов и векторных изображений по лицензии Public Domain

👉️ https://linuxmasterclub.ru/clker-com/

#Linux #OpenSource #Линукс #Сервисы #SVG #Вектор

I enjoy hand writing SVGs, and at this point I’ve created a lot. Some of them involve animation and embedded audio. But I don’t think I’ve ever created one before that made the fan on my M2 MacBook Pro come on.

#SVG #SVGFilter

Почему animated SVG не работает во Flutter «как в браузере» — и как я попытался это исправить

Почему SVG, который работает в Chrome, часто становится статичным или ломается во Flutter? Разбираю проблему animated SVG, SMIL, CSS keyframes, path morphing, фильтров и рассказываю, как из этой боли появился full_svg_flutter — SVG-рендерер для Flutter с более браузерным подходом к рендерингу.

https://habr.com/ru/articles/1030722/

#flutter #dart #svg #animated_svg #full_svg_flutter #flutter_svg #smil #css_animations #path_morphing #rendering

Почему animated SVG не работает во Flutter «как в браузере» — и как я попытался это исправить

Почему SVG, который работает в Chrome, часто становится статичным или ломается во Flutter? Разбираю проблему animated SVG, SMIL, CSS keyframes, path morphing, фильтров и рассказываю, как из этой боли появился full_svg_flutter — SVG-рендерер для Flutter с более браузерным подходом к рендерингу.

https://habr.com/ru/articles/1030722/

#flutter #dart #svg #animated_svg #full_svg_flutter #flutter_svg #smil #css_animations #path_morphing #rendering

Почему animated SVG не работает во Flutter «как в браузере» — и как я попытался это исправить

Почему SVG, который работает в Chrome, часто становится статичным или ломается во Flutter? Разбираю проблему animated SVG, SMIL, CSS keyframes, path morphing, фильтров и рассказываю, как из этой боли появился full_svg_flutter — SVG-рендерер для Flutter с более браузерным подходом к рендерингу.

https://habr.com/ru/articles/1030722/

#flutter #dart #svg #animated_svg #full_svg_flutter #flutter_svg #smil #css_animations #path_morphing #rendering

Почему animated SVG не работает во Flutter «как в браузере» — и как я попытался это исправить

Почему SVG, который работает в Chrome, часто становится статичным или ломается во Flutter? Разбираю проблему animated SVG, SMIL, CSS keyframes, path morphing, фильтров и рассказываю, как из этой боли появился full_svg_flutter — SVG-рендерер для Flutter с более браузерным подходом к рендерингу.

https://habr.com/ru/articles/1030722/

#flutter #dart #svg #animated_svg #full_svg_flutter #flutter_svg #smil #css_animations #path_morphing #rendering

#GenerativeArt interlude

Invasion percolation: immiscible substances in a porous medium

Seeping along a crack

#XQuery #SVG #CreativeCoding #HumanArt

#Development #Guides
Scalable Vector Graphics from scratch · The concepts that unlock SVG for everyday use https://ilo.im/16clkr

_____
#SVG #Animation #Design #WebDesign #WebDev #Frontend #CSS

Stavanger Airport, Sola - Stavanger, Norway

https://en.wikipedia.org/wiki/Stavanger_Airport,_Sola
https://www.openstreetmap.org/#map=13/58.876701/5.637780

#ENZV #SVG #Stavanger #Norway #airport #aviation #avgeeks #GIS

If you're a supporter on Ko-fi/ Patreon, then first of all thank you for your help during these times. 🙏

And second, there's a little something new I've posted for all supporters.

❇️ https://ko-fi.com/Post/Graphic-how-a-chromatic-aberration-filter-works-P5P41YLUPI

❇️ https://www.patreon.com/posts/156770886

#SVG #filter #svgFilter

[Перевод] Проблемы санации SVG

Рендерер Scratch имеет долгую историю связанных с SVG уязвимостей. Их источником становится то, что Scratch парсит сгенерированный пользователем (то есть контролируемый нападающими) контент в элемент <svg> и добавляет его в основной документ для выполнения различных операций (например, для измерения ограничивающего прямоугольника SVG более надёжным образом, чем viewbox или width/height). Даже если SVG остаётся в основном документе очень недолго, это небезопасная по своей природе операция. Для обеспечения защиты Scratch реализовывал всё более сложную инфраструктуру парсинга SVG и находящейся внутри разметки, чтобы устранить опасные части. Я считаю, что подход Scratch к санации SVG обречён на провал. Чтобы объяснить это, нам нужно совершить путешествие по истории санации SVG в Scratch и посмотреть, насколько хорошо он с этим справлялся.

https://habr.com/ru/articles/1029558/

#scratch #svg #рендеринг #xss

@amelliug #Typst me semble effectivement une bonne alternative à #LaTeX. Mais, par contre, ce que trouve être un avantage non négligeable ce serait, pour moi, le support natif du #svg. Ainsi je pourrais réutiliser les molécules créés par moi sous #Molketch ou sous #Ketcher par mes étudiants. Cela m'éviterait de devoir toujours convertir ces molécules ou équations sous #chemfig et #tikz ou alors exporter mes svg en #pdf ou #eps.

The Woes of Sanitizing SVGs

https://muffin.ink/blog/scratch-svg-sanitization/

#HackerNews #SVG #Sanitization #Security #Vulnerabilities #Web #Development #Coding #Best #Practices

#GenerativeArt interlude

Abelian sandpile

#SVG #XQuery #CreativeCoding #HumanArt