I love focused tutorials like this!
SVG Tutorial
71–80 of 113 posts
Re: SVG Tutorial
#72That's a great tutorial. One niggle: They refer to the SVG "tag." I had started HTMLing in the mid-1990s, and we always called everything "tags." Then, XHTML came in, and people started screaming at us for calling them "tags." They were elements , dammit! I say "element," these days, but my brain still says "tag."
Ah XHTML the web’s dark age of pedantry. Call them whatever you want man, we’re much chiller in the HTML5 era.
Re: SVG Tutorial
#73Re: SVG Tutorial
#74What’s the usual practice — do people code in SVG directly or they draw in for example Figma and generate a SVG file?
With these new transformer-based vector models, like Adobe's (https://www.adobe.com/products/illustrator/text-to-vector-gr...), generating SVG will become easier than ever.
Re: SVG Tutorial
#75That's a great tutorial. One niggle: They refer to the SVG "tag." I had started HTMLing in the mid-1990s, and we always called everything "tags." Then, XHTML came in, and people started screaming at us for calling them "tags." They were elements , dammit! I say "element," these days, but my brain still says "tag."
It's an interesting point. Writing tutorials like this also made me realize what's the difference between a function property and a function argument. I just used them completely interchangeably before. So element is more accurate here?
Re: SVG Tutorial
#76I just switched over to SVGs from bitmap images. I was using PNG images for different icons which worked fine until I had to upscale to higher resolutions. The SVGs work great and are probably smaller too (depending on the complexity). I want to render them to a canvas with different (dynamic) color configurations and I'm exploring different ways to do this.
Why not make the CSS dynamic? Or even manipulate the SVG itself in script? D3 has been doing the latter for a long time.
Re: SVG Tutorial
#77Very cool stuff, and great work. Minor UI nitpicks (my personal bugbear): - Lesson content section has unnecessary horizontal scrollbar visible - No visual distinguishing or handling for scrollable area (vs the finished display area) had me trying to scroll with my mouse hovering on the lefthand side often, and momentarily confused why it wouldn't go. Make the whole main body section scroll the content, ideally.
Yes, I was thinking of fixing the second point, but then I was annoyed with it and left it like that. If I knew that it blows up here on Hacker News I would have fixed it.
I'm not sure where you see horizontal scrollbars though. Are you on Windows?
Re: SVG Tutorial
#78This programmatic approach to drawing shapes is very familiar to anyone whose made custom controls for desktop applications (think Quartz/Cocoa and Cairo/GTK). I think you could use this approach when building a website and avoid much of CSS and HTML.
Re: SVG Tutorial
#79That's a great tutorial. One niggle: They refer to the SVG "tag." I had started HTMLing in the mid-1990s, and we always called everything "tags." Then, XHTML came in, and people started screaming at us for calling them "tags." They were elements , dammit! I say "element," these days, but my brain still says "tag."
In XML terminology (where XHTML derives from), "tags" are the delimiters of "elements". So we have "start-tags", "end-tags", and "empty-element-tags".[1] "Element" refers to the composition of the delimiting tags and all of their (nested) content.[2]
Re: SVG Tutorial
#80SVG + React is really underrated, IMO. You get all the power and abstractions of React, but instead of rendering DOM, you can render arbitrary graphics. I've used this for rendering graphs and charts, and for a certain subset of use-cases, it demolishes Canvas. For instance, if you need a little bit of interactivity, but you don't need anything too graphically crazy like per-pixel manipulation. e.g., doing hover effe…
I've made an image segmentation + tagging component with Preact.js and SVG for a client – turned out pretty neat. Can recommend for this kind of applications.