Skip to main content

Search

Items tagged with: svg

This fun little test scene is using #SVG textPath elements to make an arching caterpillar, some bees, and a trail of ants coming out of an anthill. Except all the bugs are made out of #braille that spells out the type of bug it's making up. Using the Braille36 Tiger font and using Unicode Braille Pattern characters for the braille itself to be visifle and embossable. It's really fun reading the braille in a non-standard way around the paper! #Blind #TactileGraphics #BlindSVG
A leaf made out of grey outlines and a stem is in the center of the drawing. On top of the leaf, the braille characters spelling out "caterpillar" are arched mimicking the body posture of a caterpillar inching along. An anthill is at the bottom of the drawing, with a line of braille ants coming out of it and marching down the side and along the ground. Two braille bees are in the upper right and lower right areas of the drawing, flying in different angles.
#blind #braille #svg #tactilegraphics #blindsvg

New entry in my “uses” page:

usvg is an SVG compiler, and one of the most under-appreciated tools I use. It compiles complex SVGs into simpler path-based SVGs. Edge-case SVGs may render incorrectly in some renderers (e.g. librsvg), but compiling them with usvg tends to iron these edge-cases out and make them more compatible. usvg is part of the resvg project, which is the most conformant SVG renderer I know of (and much smaller than librsvg if you include dependencies!).

I’ve sent all the SVGs on seirdy.one through usvg, and rasterized many of the emotes on pleroma.envs.net with resvg.

(sorry for the delete-redraft; I posted the wrong link and the link preview didn’t update when I edited!)

#SVG


Seirdy’s Home

My personal IndieWeb site. I write about and develop software to promote user autonomy. Topics include accessibility, security, privacy, and software freedom.
Seirdy’s Home
#svg

For those of you interested in learning how to teach #Blind and low-vision kids and adults #TactileDrawing techniques, #Coding basics, then building up to creating their own digital #SVG graphics for tactile output and beyond, the Tangible Art & Design Adventures curriculum is now live online! Come check out the TADA adventure and share it far and wide! tada.wssb.wa.gov/

Home - TADA! - CATT-NW

Tangible Art & Design Adventures by the Center for Assistive Technology Training Northwest, WSSB
tada.wssb.wa.gov
#blind #coding #svg #tactiledrawing

I launched my new #SVG Projects page today, including my SVBraille text file which lets you create properly formed braille in your file without external fonts! I put copious notes in the comments and on the Project page on how to set it all up, but if you can make SVG groups and know how to set up the Use element and can do a tiny bit of math, you are good to go! :) blindsvg.com/pages/projects/

SVG Projects - Blind SVG Study Guide

A compendium of SVG Projects put together to advance the state of tactile graphics and non-visual image creation.
blindsvg.com
#svg

Speaking as someone who used to hand-whittle SVGs with a text editor: this is brilliant. #nerd #webdev #svg nan.fyi/svg-paths

A Deep Dive Into SVG Path Commands

An interactive guide to understanding SVG paths and path commands.
Not a Number
#webdev #svg #nerd

I just launched a new site devoted to teaching how to create #TactileArt and #TactileGraphics using #SVG code. The focus is on #accessibility and opening up creativity to #blind and #low-vision folks who want to participate in building graphics, iterate on ideas, and use SVG for projects ready for embosser, swell-form, 3D print, and CriCut output. Come check it out! blindSVG.com

Home - Blind SVG Study Guide

blindsvg.com
#Accessibility #blind #svg #tactileart #tactilegraphics #low

A big update to SuperTinyIcons
github.com/edent/SuperTinyIcon…

Loads of #SVG icons for popular services - each one UNDER 1,024 bytes. Yup, less than a kilobyte each.

Take a look!


GitHub - edent/SuperTinyIcons: Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos

Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos - GitHub - edent/SuperTinyIcons: Under 1KB each! Super Tiny Icons are miniscule SVG versions of y...
GitHub
#svg

It is kinda fun to ask #ChatGPT to draw things as an #SVG. The SVG structure is pretty good, but the actual images are pretty useless. Least right now. I imagine this will change substantially in 2023.

Interesting to be able to assemble simple icon libraries with this technology in 2023.

Screenshot of bad SVG Icons for a web page.
#svg #chatgpt

This is fantastic, love it! 😻

Draw SVG rope using JavaScript muffinman.io/blog/draw-svg-rop…

#svg #js #javascript


Draw SVG rope using JavaScript

This is an interactive article. To fully experience it, you'll need to turn JavaScript on. Today, I'll take you through the process I came up with …
Muffin Man
#javascript #js #svg

Great SVG Data Visualization Examples from VISA visa.github.io/visa-chart-comp…

#SVG #Data #Accessibility #a11y

Webpack App

visa.github.io
#a11y #Accessibility #data #svg

Would love thoughts on how to improve the #SVG social media icons here (aside from deleting the Twitter link) codepen.io/mgifford-the-typesc…

We really need to make it easier for people to control social media icons and style them to meet their site. This really should be easy, accessible and susainable.

#SustyWeb #a11y #SocialMedia

#a11y #socialmedia #svg #sustyweb

It looks like a lot of organizations are going to need to update their #SocialMedia icons, so I decided to put up a few which include #mastodon.

My goal is to produce #SVG images that respect dark mode, can be easily styled with CSS, and also allow either circle, square or no background.

I want to embed best practices of accessibility, and web sustainability in this.

So what can I do to improve these?

codepen.io/mgifford-the-typesc…

#a11y #SustyWeb #DarkMode

#a11y #Mastodon #socialmedia #svg #darkmode #sustyweb

SVG images aren’t just images, they’re documents and it’s not safe to serve random people’s svg images on your website.

Here’s a tool that fixes it, and sanitizes #SVG #images to make them as innocent as a JPEG:
github.com/cloudflare/svg-hush

(In #Rustlang, of course)


GitHub - cloudflare/svg-hush: Make it safe to serve untrusted SVG files

Make it safe to serve untrusted SVG files. Contribute to cloudflare/svg-hush development by creating an account on GitHub.
GitHub
#images #RustLang #svg

And, finally (there’s so much more but I’ll stop raving now and get back to work), the web-related features, like a built-in accessibility and scripting panel and access to the SVG source, styling, etc.

If you’re creating illustrations for the web (or, heck, in general) and you’re not using this absolute gem of an app, you’re missing out :)

#svg #web #design #vector #illustration

Screenshot of a kitten illustration in Boxy SVG with the Meta panel showing with accessibility and scripting sections.
#illustration #design #web #svg #vector

And those little touches… notice how the curve that the selected Bézier control point is affecting is highlighted in purple. And you can simply pull along there to shape the curve instead of manipulating the control point handles.

Just beautiful.

#svg #foss #boxySVG #web #design #vector #illustration

Screenshot of kitten illustation in Boxy SVG showing a selected Bézier curve control handle with the outer curve of the kitten’s ear highlighted in purple. On the right, the Stroke panel is shwoing with settings for opacity, width, line cap and join shapes, etc.
#foss #illustration #design #web #svg #vector #boxySVG

Just discovered Boxy SVG and I’m in love 😍

boxy-svg.com/

#svg #illustation #web #design

Screenshot of Boxy SVG, a vector drawing app with tools like selection, shapes, etc., on the left, icons for panels (layers, geometry, etc.) on the right and a standard app menu (File, Edit, View, etc.) on top. On the canvas is a cute minimalist illustration of a light grey kitten’s head with pink ears and nose.

Boxy SVG Editor

boxy-svg.com
#design #web #svg #illustation

1400+ #Opensource, and free #SVG #icons: tablericons.com/

Tabler Icons

800+ Highly customizable & free SVG icons
Tabler Icons
#opensource #svg #icons

⇧