Person: Check out this “savage” file!

Me: Huh?

Person: *Shows SVG file*

🙄

My Company paid a designer for a svg graphic. This is what we got:

Svg. Ever heard of it?

Made a little program to draw svg images on an oscilloscope using XY mode. Heres tux!

My new treasure. I'm excited to dive into.

.svg is a work of god.

Thank lord I love .svg

Every single diagramming tool.

All the SaaS ones are either way too limited in function, or proprietary vendor-locked.

All the FOSS/desktop ones have a 90s UX experience.

I really want to make a great, comfortable-to-use diagramming tool which just directly uses SVG as the file format, but without the "FUCK IT DOESNT ALIGN CORRECTLY AND WHY IS THIS ARROW BEHIND THE REST" experience...

But I know deep down that it's hard work, and I'll probably get stuck delivering the gazillionth lackluster, bugged diagramming app.

Shrank the size a logo from 794kb to 5,27kb.
This was purely done to push my ego.

Svg files don't work with Edge
*facepalm*

Fuck post-it notes.

Oh look, another product manager found his inner child and plastered a wall with a colored arts and crafts project.

Don't misunderstand me, I'm abso-fucking-lutely in favor of connecting with your deep childish nature -- but then at least enter the meeting room like a boss, armed with some creative ideas, really get to work with some fingerpaint, modelling clay, glitter, molly, acid blotters and grape juice for the whole party.

Not only was that project poorly thought out. Not only does the assortment of colored squares contribute nothing to the clarification of ideas. The issue is also that by Monday morning, the meeting room will look like a strip club after an escalated party, floor littered with 60 little neon pink and green slips reeking of desperation, cheap glue and failure.

Now your whole project is on the floor.

OH DIGITAL WHITEBOARD YOU SAY. NOW WE HAVE 10 MANAGERS FIGHTING DIGITALLY OVER VIRTUAL POST-ITS, ON A CLOUD SERVICE COSTING $500/MONTH.

Product managers, just go fuck yourself, I don't care about your kindergarten bullshit processes.

Call me when you manage to pull a workable idea out of your ass, and just draw an SVG diagram with Inkscape, or write your brainfarts into a nicely organized Markdown file.

When you ask the design team to provide you with a svg of an image, and they give you an svg with a png inside it...

This just came in, hyped!

So far all designers I worked with do the following:
1. Use "creativity" to come up with stuff that the system does not allow implementing, for example: Changing clock color in mobile statusbar to Blue!
2. Use "creativity" to come up with a heavily customized calendar for a windows software which requires building the control from scratch, but they explain their creativity by saying: Can't you use CSS?
3. Provide iOS only design which follows android guidelines and refuse to provide android styles for at least pages that to be handled differently on each platform, for example, we had a checkout page in an app, and they wanted the same style for both WITHOUT building custom control for it, they said: Can't you use the android custom control inside iOS
4. They design for a website and send same mockups for me to implement on mobile apps, the problem is a web page runs on a big screen when the mobile app doesn't have room for half the stuff they designed but they must look exactly the same as website !!
5. They send entire PSD with no color codes and say: You can extract icons, and colors from psd ... When they should provide them as per our request which is: SVG for Android and PDF for iOS with the color codes, but no, they are lazy!
6. They ask the team to create a page in the app which is almost production ready just so that they test different font sizes and see how it will look on the phone
7. Same as #6 for images that contain text

The list goes on, but those are by the far the ones that made me one step away from resigning, some of them made me resign...

Spent ages (at least 10 minutes) trying to get svg to load using <img /> tag. Checked for browser support, checked for format of svg and how it was imported. All seemed fine.

Finally realised I had spelt src as scr...

No prior knowledge on svg. Somehow Built this animated svg using React components 😼

Can someone please build an SVG vector file format equivalent that uses json instead of xml? k thnx! 😆

Developers to designers be like...

-GDPR
-News letter
-Ads blocker blocker
-Ads popup insite
-Ads popin in video
-Ads popin podcast
-Ads in mail
-Ads in software
-Ads in any android application
-Ads in windows
-Ads in ads
-Auto scrolling
-Slideshow
-Scroll position reset on back button
-Aria-label aria-labelledby aria-role aria-aria of game of thrones
-Order in dom for a11y different of the display order -Button :hover, :focus-visible, :focus-within :fuck-this
- SVG abandoned ware
- I make you a illustrators X version that not work with yours, i use figma. I use affinity, i use akira. I use photoshop, i use word. I use powerpoint, i use publisher, i use paint, i use all Asss (application as a service) on the web and to see what i make you need to pay you an account
-We all make frontend backend... No linter or something... Why we have always 848274 change in git ....
We not host anymore we use 62616 different cloud services to try all the fucking company everywhere
-Make a Drupal CMS to a client that's are to idiots to use it and call you each time they have something to modify

And goes on

Web tooday is fucking crap shit
People realize that you cannot make money anymore with informative website. Then everybody try to squish people at the last drop... Because of selfishness.

I Googled "png to svg converter", this is the output of the first online tool I tried.

This dev literally just a base64 encoded copy of my origin image wrapped in an svg... the most infuriating thing about it is that technically it did 'convert' it to svg - just not in the way I had anticipated.

Whoever wrote this is a lazy genius (and a dickhead).

When you accidentally thought Vue JS is Vivus JS and argue why would you need a SVG animator to compare with React. JS naming. God.

It is sooooo pleasant to work with .svg assets ☺️

Me to customer: I need that image in either svg or png format.

Customer sends a zipped .docx file containing nothing but an image.

Using chatGPT. Seems about as cooperative and willing to do its job as I am.

Can you make me a word cloud in svg format?
"I'm sorry, I can't directly generate svg content, here are some other tools for that"
Can you write code?
"Yes, certainly, here's some python to generate a word cloud"
Can you write svd code?
"Yes, certainly, here's an example word cloud in svd format"
Can you make the words get bigger when I mouse over them?
"Yes, here's the code".

It's mastered "have you tried googling it?"

i cant stand these idiots anymore. My instructor needed 12 Minutes to understand Megabyte and Mebibyte. He just used the snipping tool to save an SVG from Wikipedia. My instructor is an Person who wrote small Programs in the past and thought that an instructor license is something useful. It hurts listening to him. he was kept busy for hours because of nothing, so we could only twiddle our thumbs. our first instructor went probably because of the Management.
At the beginning of June I will give my lecture for my final exam.
I am fucked.

As I already said on devrant, I'm a freelance web developer and I also often sell my services for teaching, loving that. Currently I'm teaching PHP with 30 students and it's going very well.

But yesterday, I received an offer for giving another course next month, this time on HTML and CSS, for a company I don't know yet. Almost every line of this email is wrong, outdated by 20 years, or just basically meaningless...

So I thought I could do my best to translate this as close as possible to the original, preserving the wrong formulations too, just for you devranters fellas.

"Hello,

I have an offer for a 2 days course for 5 people (level 1+ and/or 2), on HTML5 and CSS3. Below, the program :

1. XHTML AND CSS2 INTRODUCTION

Advantages and benefits of change

Understanding compatibility for different versions of browsers

HTML, XHTML, CSS edition tools : presentation of the different tools

The CSS language : different types of selectors : class of selector, identifier of selector, contextual selectors, grouped selectors

Blocks of text, boxes of text

The CSS1, CSSP, CSS2 properties

Relative and absolute measures units

2. LAYOUT TECHNIQUES

Full CSS, XHTML websites demo

Positioning with the position property, positioning with the float property

Columns creation

Layout for forms

Layout for data tables

Layout for menus

3. INTRODUCTION TO SVG (SCALABLE VECTOR GRAPHICS)

Role and importance of SVG

Using SVG on client side : basic shapes

SVG structure of document, tags examples

Using CSS styles with SVG

Different integration methods for SVG in a XHTML document

4. OPTIMISATION OF JAVASCRIPT CODE

Introduction to DOM and Javascript

Access to document objects : different access techniques, using this keyword, create elements dynamically

Positioning elements with the help of Javascript : positionning elements relatively to the mouse, move elements

Show/hide elements for creating hierarchical menus

Code optimisation techniques : using objects, objects litterals, loops optimisation

Can you please give me your availability ?"

Seriously...

CSS-fucking-1 ! Is it a course for dinosaurs ?

...And if only my rant was just about the program...

It's totally impossible to cover all these subjects in only 2 days with people of different levels and experience.

The guy exactly said to me : "don't worry about the program, it's an old text but they agreed to it anyway. They just want to learn HTML and CSS, some of them already know it but want to learn more, and the others are total beginers.".

And here is the meaning for the "(level 1+ and/or 2)" part in the email.

So... Surprizingly, I accepted the offer, but asked for at least a 3rd day. I'm waiting for their answer, but I'll do it anyway, adapting the course content to the actual students knowledge. I need the money, after all.

Wish me luck...

It's just sad that these formation companies are selling bullshit to clients that just want to learn something useful. It's too often like that, they sell shitty/useless programs and we have to catch up in real time with students that don't understand why they don't learn what was told to them.

Building a website using Wordpress and Visual Composer for a client is pretty easy, right?!

Until the clients wants to change one of the icons to sofa “you can’t use image, and visual composer has a list of only 5 icon libraries and none of them has a fucking sofa icon”.

Manager says just do it today!
Ok no problem.. just had to figure how visual composer communicate with the libraries to show them in the module area, edit the function, create the font/svg files for the new icon, edit the css file of one of the libraries to add the icon. And boom its working fine!

No tutorial about this stuff so had to figure it out by reading the code and see how they did it so I can do it.

After finishing this, they just gave me few more changes as I have done nothing.

Thank you

You know you're a developer when on your machine an ".svg" file automatically opens in a texteditor...

Client wondering why svg icons doesn't render properly. They put a fucking base64 png in a. Svg.
Damn

Do not recommend. Pretty basic shit...

Please don't Google "member" when your looking for membership icons on a free SVG icon website in a very public office.

Honestly, why on earth do people give me un-cropped SVGs. That isn't helpful...

Gamemaker studio 2's 2019 roadmap just got released.. Still no Linux IDE (FFS) but it only took them how many years to realise that not every developer is a malicious cunt and give us the ability to disable to sandbox file system?!

I swear they add and change stuff that is so trivial instead of focusing on the engines major problems and absent features, eg. Can't use SVG graphics, the need to be exported in flash (SWF) because you know, makes sense?

Affinity Designer export to SVG, normally an easy task for a vector programme.
Furthermore it is only a little picture, a clear eight filled with a single colour.
Result: SVG with an unbelievable file size of 98.7 kB. Holy shit!
Looked at it: The export made a huge long high scaled path... oh man...
Little hand made recoding, made four circles. Done. New size: 0.8 kB.
That's better.

Content strategy expert: How long would it take to program an SVG animation intro video

Me: I'm not sure I've never programmed one before.(still teaching myself)

Content expert: iS it even possible?

Me: yeah all things are possible in programming ;)

Content expert: so then how long would it take

Me: no.

Content expert: but wouldn't it be easier if...

Me: no, go away

Did not understand why people posted so much on here till I had to argue with my "partner" product manager that SVG icons are better than pure CSS icons, and yes there is such thing as animated SVG, and no I'm not a designer to create fancy icons for you just because they "are actually code" you twat

There is a drawing competition for my currently most played game.
I'm on vacation and the deadline is when I get back. So what did I do?

I made an inspiration cluster with the character and drawings having this arrogant face (laptop, gimp).
I sketched on my phone and put it on my laptop (the sketch). I have no desk here so I'm drawing on my bed. I have no drawing pad so I'm drawing with my mouse. Then I draw it in gimp with colors and everything (the stroke in another program on my gfs laptop), put each layer in inkscape to svg-ify them and to hq-render them back in Gimp. Corrected a few things in Gimp. Added more detail, effects (glow, gradient instead of flat color ...).

~6 hours over two days. That was fun. And fucking unprofessional.

I asked for SVG icons from figma design.

He did the part.

But.

He didn't group the icons
and gave me parts of it.

Separately

So Microsoft, no support for SVG in WPF in 2017? I really need it right now..!

When you’re working on a React-Native app and decide to remove a library, don’t accidentally type a space instead of a hyphen when trying to remove something like ‘react-native-svg’. Xcode/expo get super mad when you remove react-native.

I had a bug on two animations for 2 months caused by a fucking svg img lazy loaded with no width/height in between png-s on top of the page... This was the biggest blocker on final qa. Im so done with this shit... 😶

Fuck Android Studio and Gradle!
Especially Gradle, you fucking slow RAM consuming shit!

It consumed like all of my RAM and my computer is lagging like shit

It can't even import my SVG!

Because of frustration I accidentally hard reset my local git repo and lost 3 hours of work!

Developed my first animated svg information graphic and i am proud of it 😊

I've been to svg once again. What do you guys think?

I loved you Xamarin.Forms I really did.
I defended you everywhere... Released 5 apps.

You FUCKING SUCK, no svg support (no none of the apis work), startup time is FUCKING insane, i could go on for hours......

Please any Android Developer out there is there any smooth transition to native? (Dont tell me about Js bullshit)

Help me fell the Native Power of Android.

Show me that apps don't need 20 seconds to start.

React Native so far today:
1. need external dependency to load svg
2. react-native link doesn't work as it should
3. metro bundler not updating its cache

I wonder if the list will grow or that's it for today...

Ok so I'm am a black end kind of guy and have had to deal with making our site again and again and again and fu#@ing again.

Who the hell thought up using SVG icons. My first look at it today and I'm not sure if I hate it or love it. Any thoughts?

Sure you can specify svg object attributes x, y, width and height in metric values like mm and after put things on paper get same printed output but if you want to transform svg object you need to calculate new values by yourself cause you can’t simply provide translate (10mm, 10mm).

Now I ended up with manually converting values to mm.

Making free transform tool for exact document data rendering inside browser is pain in the ass.

I started to wonder how google docs or microsoft word for web deal with this stuff.

Why the fuck can’t text wrap inside a svg without JS.?

Markdown to rich text is like SVG to PNG.

Looks like vector drawing applications stopped at bezier curves and don’t want to progress much.

I made a inkscape vector image and I used svg patterns to draw some background, then inkscape stopped responding when I’m trying to open that file on mac.

I tried bunch of other vector drawing apps hoping that at least one know what svg vector patterns are, looks like vector drawing applications use bitmaps for patterns and own formats instead of following svg specification.

I even wanted to pay for illustrator 30$ per month but it can’t do it. It opened my svg file claiming there’s no background there just empty space.

When I open svg image from browser it renders correctly but editing with gui is impossible cause all of those great softwares like illustrator, vectronator, sketch, affinity designer can’t handle vector patterns.

I ended up installing inkscape on old laptop that’s running ubuntu desktop.

Inkscape can do everything I want but I still need to delete not used pattens by editing xml.
At least it handles svg better than others.

Seriously vector image drawing apps suck.

Hey guys, I was wondering how are these images created and what are they called? are they SVG graphics?

It seems he is trying to replace HTML with svg and canvas when basic html and css can be used to make beautiful dashboards.

Like i anticipated it is gonna be a ux cluster fuck, where most of the website is an ugly bootstrap contraception and some parts gonna look like futuristic.

Fucking Chrome. I wish him cancer to die soon. Yeah, please fucking give me as event target svg element! Well done!

Apparently batch converting SVG to PNG is harder than it seems.

I'm worried that this question will probably get downvoted on SO and I cannot post from my account as well, so here it is..

How to play youtube embedded video in mobile over a custom button / svg / image ?

One idea I'm currently working on is to trigger &autoplay=1 onclick but it is only appending that parameter to existing URL?

Please let me know if you have any thoughts, and I'm doing this for only mobile devices only

P.S I cannot use YouTube API

As we are all aware, no two programmers are identical with regard to personal preferences, pet peeves, coding style, indenting with spaces or tabs, etc.

Confession:
I have a somewhat strong fascination with SVG files/elements. Particularly icons, logos, illustrations, animations, etc. The main points of intrigue for me are the most obvious: lossless quality when scaling and usage versatility, however, it goes beyond simply appreciating the format and using it frequently. I will sit at my PC for a few hours sometimes, just "harvesting" SVG elements from websites that are rich with vector icons, et al. There is just something about SVG that gets my blood and creativity flowing. I have thousands of various SVG files from all over the web and I thoroughly enjoy using Figma to inspect and/or modify them, and to create my own designs, icons, mockups, etc.

Unrelated to SVG, but I also find myself formatting code by hand every now and then. Not like massive, obfuscated WordPress bundle/chunk files and whatnot, but just a smaller HTML page I'm working on, JSON export data, etc. I only do it until it becomes more consciously tedious, but up to that point, I find it quite therapeutic.

Question:
So, I'm just curious if there are others out there who have any similar interests, fascinations or urges, behaviours, etc.

*** NOTE: I am not a professional programmer/developer, as I do not do it for a living, but because it is my primary hobby and I am very passionate about it. So, for those who may be speculating on just what kind of a shitty abomination of a coworker I must be, fret not. Haha.

Also, if anyone happens to have knowledge of more "bare-bones" methods of scraping SVG elements from web pages, apps, etc. and feels inclined to share said knowledge, I would love to hear your thoughts about it. Thank you! :)

I decided to make some new icons for Atom editor (the launcher/executable ones), because I liked the vscode-icons project.

Made the repo on GitHub and decided to automate making the icons for different OS using Travis CI.

Started writing the Python Script for Travis.
My google queries:

How to generate icons for Linux?
I can use SVG or generate a PNG, many libraries available. 👍👍

How to generate icons for Windows?
Generate PNGs of various sizes and pack in an .ico file. Easy enough

So far so good.

How to generate icons for Mac?
Mac needs a .icns file, a package of PNGs of various sizes. Libraries available but can be done on OSX only. 😫😫

Then I think, what OS does Travis use?
Oh, I can specify macOS in it 😁😁😁

Starts the build 😎😎

Travis doesn't support Python on macOS

😑😑😑😑

On interview: do you know SVG?
intern: yes

It turns out that they meant that they know how to select "SVG" as the export format.

Thank god that intern went into the design department and not coding.

Guess it's a sign you haven't had enough sleep when you're creating a slanted div and it looks curved so you compare with a ruler to be sure and it is in fact straight.

Google svg is much better name because of the jack removal

CSS (and all of frontend) is hard. The last few braincells left in me are slowly dying.
I just wanted a progress bar. HTML 5 supports <progress> out of the box. But all browsers want to act differently. Add more boilerplate for each browser type. Somehow got a transparent background on progress bar but it still won't let me change progress color.(Surprisingly, only IE let me change the color) At last, settled with a transparent div with a colored span inside, + js to handle value. Was this really the best way? Nope. But this was the only thing that worked,(other than importing a JS library, which would render a SVG to replicate a progressbar)

Why is front end so convoluted? Half of the things do not even make sense to me. Is this really the direction we want to go in the future?

Can someone suggest me a quick way to create some svg files or convert some basic flat shapes like image of a redcircle or a blue heart into .SVGs?

I don't have any experience in graphics development, so online/offline tools or converstion engines would be also nice.

Working with friend and using nodejs websockets and SVG to build online multiplayer lazer screen arcade like games.

The only delay is having to stop every couple of minutes to restate how cool this is.

We can't have good things, can we, SVG implementations??? Apparently, I can't re<use> anything from adjacent file, because only Inkscape understands it. Or to seek support in browser, server is required to see a group from one SVG file in another. Why?

I'm sorry, but who thought eslint or any linters for that matter were a good idea.

Started a new vue project using the cli, installed tailwind... oh what's that you don't like the line length... get out of here. It's an SVG and using a class-based framework. The hell.

Any way of removing eslint? I just want to code and not get bs warnings because of an svg length or because I add one to many classes.

Guys help!
What's the best way to convert an svg vector to swf?

I'm stuck on windows though :-/

I'm wasting fucking hours to crop a fucking svg file!
I swear, I tried in all the ways, firstly I didn't want to download a software so I searched for some online editor, I tried fucking 10 of them, but none of these had a way to crop images. How the hell should I be able to craft images if I'm not able to decide the size, eh?
I read online that inkscape gives a lot of problems when it's about to crop images, and of course I didn't want to pay illustrator to fucking crop a file, so in the end I decided to give a chance to inkscape. The website gives me 502 bad gatweay.
Ok.
FUCKING CROP AN IMAGE.
2018.
TWO THOUSAND AND EIGHTEEN

apple you mongoloids, default background of images should be transparent not white

im too retarded to figure out how to be able to view these fuckign white images (svg file extensions to be specific) ive been given because the fucking default background is white and im too retarded to find a way around it quickly (still working)

fuck you

"IT juSt WerkZ!!!!1111" - steve jobs dying of an easily prevented early caught cancer or some shit because he doesn't want the minimally invasive surgery that would fix him, but would rather juice cleanse (idk if true, only vaguely remember memes)

I'm trying to load an SVG icon sprite file in a Webpack based application. It's been almost three hours with no success.
This is why I hate frontend development. Libraries are not structured and make no sense. It's a game of luck.

I've worked on countless products and maybe one bigger one (map portal for a national park) and one side job (randomized svg to g code) had any positive social impact. I've been paid for being useless but busy. The entire economy is a scam.

I don't understand why the fuck it takes me more than a day to fucking make an svg work dynamically with its background and it still doesn't work for fuck sake

Just putting the idea out there:

How cool would it be to be able to make SVG screensots!
The OS asks every application within view whether it supports SVG rendering. If so, it collects the SVG rendering. If not, it uses a PNG pixelated fallback.
Most form applications and browsers should be able to provide SVG renderings of the view, right?
Imagine the crispness of the screenshots...

Has anyone worked on developing an electronic schematic creator/editor application?

Holy shit how have I not tried using an SVG inside of a sudo element before. That's awesome and will save so much time styling global elements.

What do you guys think about using Pyqt for building an open source Svg Editor?

if your online preview is an svg without watermark, why should i sign up for a paid account to get vector files?

Are there any good uml connector libraries to connect svg components using svg paths. The connections should sustain even if the svg components are moved/dragged around.

Modern Web Developer
(To the tune of "I Am the Very Model of a Modern Major-General" from Gilbert and Sullivan's "The Pirates of Penzance")

I am the very model of a modern web developer
I’m quite fluent with JavaScript; An HTML whisperer
My code is clean and elegant, I genuinely innovate
And even know my way around a Promise and async / await

I’m very well acquainted too with matters vector graphical
I understand why SVG coordinates seem magical
And even without Photoshop I elegantly can produce
A mockup or a logo in most any format that you choose

[Chorus]
A mockup or a logo in most any format that you choose
A mockup or a logo in most any format that you choose
A mockup or a logo in most any format that you choose

I'm quite adept at ES6 expressions like destructuring
I know the ins and outs of functional reactive programming
In short, in matters browser-based or Node.js if you prefer
I am the very model of a modern web developer

[Chorus]
He is the very model of a modern web developer

I know our mythic history, the humble start, the browser wars
I know why Douglas Crockford fought the battle over ES4
The World Wide Web Consortium and Ecma International
My knowledge of our legacy is truly supernatural

With LESS and SASS and CSS, designing for mobility
I’ll perfectly apply the right amount of specificity
From custom fonts and parallax to grid and flex and border-box
I know most every tip and trick both common and unorthodox

[Chorus]
He knows most every tip and trick both common and unorthodox
He knows most every tip and trick both common and unorthodox
He knows most every tip and trick both common and unorthodox

And when it comes to lazy loading, bundling up and splitting code
There’s nothing quite like Webpack, which of course is built on top of Node
Considering my resume, I’m certain that you will concur
I am the very model of a modern web developer

[Chorus]
He is the very model of a modern web developer

When new frameworks and libraries emerge I must be ravenous
And gobble up the hot new thing, my appetite is bottomless
React and Vue and Angular, Immutable, RxJS
The list will be outdated long before I'm finished singing this

My pull requests rely on multitudinous utilities
To help me lint and test and build, a deluge of analyses
And every single day there are a hundred thousand more to learn
The web is going through an irresponsible amount of churn

[Chorus]
The web is going through an irresponsible amount of churn
The web is going through an irresponsible amount of churn
The web is going through an irresponsible amount of churn

This pace is agonizing! Code from yesterday is obsolete!
The speed of innovation is enough to knock me off my feet!
It's happening too fast! I can’t keep up! I’m tired! It’s all a blur!
I am the very model of a modern web developer!

[Chorus]
He is the very model of a modern web developer!

A lot of graph theory libraries create a HTML/svg elements for nodes. Is it possible to convert the existing svg elements to graph nodes?

Heya

Does anyone know how the profile customisation is made ?
i think i can manage to do it using canvas
But also svg doesn't sound that bad

So ?

SVG API getPointAtLength() is my favourite because I hate math! 😊

How to prevent svg tag from fucking my html structure up ?

Is there a plug-in in vscode to hide that?

Article about creating gradients programmatically.
FullHD png with gradient at the top...

Use fucking svg or at least webp! It's 2k17 already.

Ok just wanna share things that got me stuck for hours on my recent project and their solution. I hope it’s gonna help someone.
To start with, when I was implementing svg to png, i set an image object’s source with a data url. Normally this is going to trigger the onload hook. However for some fucked up reason it never triggered. The solution is to use setAttribute function and then the hook will be triggered.
Second, you can get rounded triangle by setting stroke width and set stroke linejoin and line cap as round. But remember, if stroke width is 6, then it’s 3 inside and 3 outside.
Third, if you have a rotation of svg element, and later on you want to manually compute the rotated point’s position, it’s most likely some vanilla code is not going to work. You see, when you rotate for x degree, it is actually rotating -x degree. I’m not sure if it’s a bug of my code, but it’s there.
And now the worst thing: if you look up how transform on svg is performed, stackoverflow is going to tell you it’s by order. But that’s somehow not true for my project. If I do set transform to do translation then rotation, the order it was applied is actually reversed. It’s rotation first then translation, like ffs why? Who the fuck said it was in order? It’s clearly in reverse fucking order.
Ok last thing, you can scale svg around it’s center, but absolutely don’t do that because it’s gonna fuck up tanslation and rotation applied to this svg. If you need to scale, translate it first then scale it will be better.

Anyway just some things i encountered. I’m gonna stay away from svg for at least two months now

Welcome to school. In my case the place where you are getting teached design and the teachers don't know what the hell svg is. And teach you that gif animations are the best way to implement buttons on your website. 😂

Chrome handles CSS animation on an SVG element with 500 nodes like a champ with an SVG graphic with outline animation over it.

Firefox barely animates the SVG then has tearing issues when a part of the SVG leaves the viewport and re-enters. Annoying AF and now a changed design.

Whoever decided that the SVG's default point of origin should be the top left instead of the bottom left can go to hell.

the error was svg not javascript. urghhh

working with Mapbox and so far everything works except displaying custom svg pointers for single points while clustering the multiples.
the documentation is only semi useful.
and my work-at-home coworker keeps meowing at me like that guy who wants to talk about TV shows whenever I'm working
I want a nap!

Wondering still good use SVG in CSS or better other format?

Alright lads and lasses, I need a charting library!

I've narrowed it down to the following popular libraries:

- victory
- recharts
- nivo
- react-vis

I think I'm leaning towards victory and recharts since they are d3 based... because <3 SVG

Even more so victory since they have a near identical React Native package...

Would love to hear any battle stories from the front lines and experience using any of these libraries, or even a completely different one I may have missed!

inb4 "mAkE iT fRoM sCrAtCh"
inb4 "hAhA rEaCt SuCkS"

Such comments will be downvoted with impunity!

I had to make a ruler grid for an existing horizontal scroll website project, but I had the job basically for sure.
I came up with a solution which included PHP-generated SVG embedded in HTML.
It was a new thing to me at that time, but a cool challenge.

Does anyone know of a good tool or service for compressing svgs for web.

I got about 80 files I need to reduce in size

Help!

I simply hate d3.js. This thing is a night mare. stupid svg and canvas and d3.js
Fuck this charting library. Burn in hell!

Hitting every. single. fucking. dead end on my unstoppable march to introduce a nice feature.

I'm trying to embed interactive svg maps in a Wordpress page in such a way that the areas can be edited intuitively using Inkscape and all the page does is inline the xml markup, but also there's a JPG background embedded in the picture which Wordpress finds too big for markup (unsurprisingly) but which is a pain in the ass to reference externally.

Fucking android...
Spent my whole day trying to tint (i.e. alter the image color) some svg with a PictureDrawable in an ImageView.
Went android underground, thought it had something to do with LAYER_TYPE_SOFTWARE (since this was required to render the underlying svg), tried my way through ColorFilters and ColorStateLists...
8 hours later I discovered that apparently YOU CANNOT TINT a PICTUREDRAWABLE - this only works with BitmapDrawable. *argh*
And not a word of mention in the fucking documentation *tit*

is there an SVG file available of the devRant logo by any chance?