Open in app

Sign In

Write

Sign In

Mariana Beldi
Mariana Beldi

131 Followers

Home

About

Published in UX Collective

·Pinned

6 common SVG fails (and how to fix them)

Someone recently asked me how I approach debugging inline SVGs. Because it is part of the DOM, we can inspect any inline SVG in any browser DevTools. And because of that, we have the ability to scope things out and uncover any potential issues or opportunities to optimize the SVG. …

SVG

10 min read

6 common SVG fails (and how to fix them)
6 common SVG fails (and how to fix them)
SVG

10 min read


Published in UX Collective

·Pinned

8 tricks for SVG optimization

Get better code before exporting your files. — Many online tools help us optimize SVG files before getting the code into our projects. But what if I tell you that the way we draw every element has an impact on the exported code? Understanding the code generated from graphic software will help us gain more control over it…

SVG

7 min read

8 tricks for SVG optimization
8 tricks for SVG optimization
SVG

7 min read


Published in UX Collective

·Pinned

Mastering SVG’s stroke-miterlimit Attribute

So, SVG has this stroke-miterlimit presentation attribute. You’ve probably seen it when exporting an SVG from a graphic editor program, or perhaps you find out you could remove it without noticing any change to the visual appearance. After a good amount of research, one of the first things I discovered…

SVG

7 min read

Mastering SVG’s stroke-miterlimit Attribute
Mastering SVG’s stroke-miterlimit Attribute
SVG

7 min read


Published in Muzli - Design Inspiration

·Pinned

Building an SVG virtual stand

A responsive illustrated website with CSS Grid — Nerdearla is an annual conference with talks and workshops about technology and science here in Buenos Aires. As sponsors of the event with Leniolabs, we used to have a stand where people could come by and say hi, play games with us, talk about technologies we love, and get some…

Web Development

5 min read

Building an SVG virtual stand
Building an SVG virtual stand
Web Development

5 min read


Published in Geek Culture

·Pinned

How I Made a Generator for SVG Loaders With Sass and SMIL Options

While learning Vue.js, I started building free web tools that involved the exploration of SVG, with the goal of learning something about both! Let’s take a look at one of those tools: a generator that makes SVG loaders and lets you choose between SMIL or Sass animation, different styles, colors…

Svg Animation

7 min read

How I Made a Generator for SVG Loaders With Sass and SMIL Options
How I Made a Generator for SVG Loaders With Sass and SMIL Options
Svg Animation

7 min read


Feb 11

6 fallas comunes en SVG

— y cómo solucionarlas — Parte I → Cómo postularse Parte II → Pregunas respondidas Anexo → 6 fallas comunes en SVG (y cómo solucionarlas) Alguien me preguntó recientemente cómo debuggeo SVGs inline. Debido a que son parte del DOM, podemos inspeccionar cualquier SVG inline en cualquier navegador con las DevTools. …

SVG

11 min read

6 fallas comunes en SVG
6 fallas comunes en SVG
SVG

11 min read


Jan 26

SVG Magical Mystery Tour — Parte II

Un workshop en Nerdearla — Parte II: Preguntas respondidas — Parte I → Cómo postularse Parte II → Pregunas respondidas Anexo → 6 fallas comunes en SVG (y cómo solucionarlas) En este artículo quiero ampliar información que se habló en el taller, dejar links útiles para responder las preguntas que surgieron y para quienes estén interesados en profundizar más en…

SVG

5 min read

SVG Magical Mystery Tour — Parte II
SVG Magical Mystery Tour — Parte II
SVG

5 min read


Jan 26

SVG Magical Mystery Tour — Parte I

Un workshop en Nerdearla — Parte I: Cómo postularse — Parte I → Cómo postularse Parte II → Preguntas respondidas Anexo → 6 fallas comunes en SVG (y cómo solucionarlas) El año pasado me propuse un objectivo: dar un taller en algún evento, aunque fuera solo dar el pimer paso, mandar un pitch. No pensé que quedaría seleccionada, así que…

SVG

6 min read

SVG Magical Mystery Tour — Parte I
SVG Magical Mystery Tour — Parte I
SVG

6 min read


Published in Muzli - Design Inspiration

·Dec 2, 2021

Leniolabs Brand and Website Redesign

Redefining our new identity — Three years after redesigning our brand and site, we decided it was time for a change. Not only the world is moving dramatically fast. …

Branding

6 min read

Leniolabs Brand and Website Redesign
Leniolabs Brand and Website Redesign
Branding

6 min read


Published in Level Up Coding

·May 4, 2021

How to Add a Double Border to SVG Shapes

Let’s say someone asks you to add a double border to some random geometric SVG shapes. For some reason, you can’t use any graphic editor — they need to be generated at runtime — so you have to solve it with CSS or within the SVG syntax. Your first question…

SVG

4 min read

How to Add a Double Border to SVG Shapes
How to Add a Double Border to SVG Shapes
SVG

4 min read

Mariana Beldi

Mariana Beldi

131 Followers

I write about design + code + illustration & SVG. Head of Branding @ Leniolabs.com • holasvg.com

Following
  • Muzli

    Muzli

  • Jeremy Keith

    Jeremy Keith

  • Roy Derks (@gethackteam)

    Roy Derks (@gethackteam)

  • UX Collective Editors

    UX Collective Editors

  • Lucia Leon

    Lucia Leon

See all (101)

Help

Status

Writers

Blog

Careers

Privacy

Terms

About

Text to speech