Live data from Hacker News

SVG Tutorial

svg-tutorial.com

81–90 of 113 posts

Re: SVG Tutorial

#81
post #62

Earlier quoted context omitted.

Ouch. Some browsers might not support every feature. Gradients also have some issues. Luckily it seems to be all right so far in desktop browsers.

Thanks a lot for your website it's really nicely written. Can you add a disclaimer for this one to say it does not work on firefox android (i also hit the issue ^^)

Not working on Edge on android either.

Re: SVG Tutorial

#82

That'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?

SVG is basically an expression of XML, and XML uses "element" for everything, so it would be more appropriate, but, TBH, I really don't think anyone reading gives a damn.

I have done a ton of tutorials, myself, and have found that using vernacular, and expressing in basic, readable language, always works best. Being too pedantic can make it seem "stilted."

Re: SVG Tutorial

#83

Earlier quoted context omitted.

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?

SVG is basically an expression of XML, and XML uses "element" for everything, so it would be more appropriate, but, TBH, I really don't think anyone reading gives a damn. I have done a ton of tutorials, myself, and have found that using vernacular, and expressing in basic, readable language, always works best. Being too pedantic can make it seem "stilted."

AFAIK, XML gets it from HTML (which was its inspiration), which got it from SGML (of which HTML was originally an application), all use "element".

But, yes, SVG is an application of XML.

Re: SVG Tutorial

#84

I 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.

Yes, that's what I wanted to do, change the CSS values (based on ids, I guess).

I'm pretty sure I've heard of D3, I'll have to check it out. Thanks.

Re: SVG Tutorial

#85
post #72

That'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.

XHTML strictness would have been a great start but at that point the "best-effort"

cat was out of the bag

I mean what is worse? Incorrectness, or losing ad revenue :-)

Re: SVG Tutorial

#86

Very nice. It would be nice to see an example or two with text + an image, as this is the battle I'm currently fighting. Alignment is a trip, let me tell you... While I've played around with Inkscape, I'm definitely on the "writing XML" side of the fence in order to create what I need.

With text I wasn't experimenting too much, apart from the example where it follows a line. I know there is text anchor: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/t... And someone suggested the foreignObject tag that might be useful here: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...

While most of the SVG text examples I've seen have a "word art" type of feel to them, I was mostly thinking it would be nice to show another common use case.

Recently, I've been using Standard Ebooks' toolkit to convert my Master's Defense into EPUB. SE uses SVG as its image format for covers - along with a few scaled JPGs. Unsurprisingly, all of this starts out as text and there is extensive use of text-anchor to get the alignment right.

Although they use XHTML as the primary input format, foreignObject is a concept I haven't encountered before, might be worth checking out...

https://standardebooks.org/contribute/producing-an-ebook-ste...

Re: SVG Tutorial

#87

Very nice. It would be nice to see an example or two with text + an image, as this is the battle I'm currently fighting. Alignment is a trip, let me tell you... While I've played around with Inkscape, I'm definitely on the "writing XML" side of the fence in order to create what I need.

> Alignment is a trip Inkscape's alignment functions works for me. For things where I needed more precision, what I do is press ctrl+shift+x and type in the coordinates there. (Inkscape's XML editor seem to crash very often for me, but it's workable if I remember to save after every edit).

I suspect my frustration here is that although Inkscape's controls sort of look like Word or any number of other word processors, since it can modify a document's underlying XML, it requires keeping both paradigms in your head as you work.

I know people use it and like it, but in trying to get something done in a way that would save time, this approach didn't really click for me.

Re: SVG Tutorial

#88
post #18

Earlier quoted context omitted.

This is very cool and fun! For Day 10, I don't see a snowman. I think you lose the background somewhere so it's white on white, I'm on my phone though so I can't dig in too far.

Yes, there's some bug with using gradients that I couldn't figure out yet. Are you looking at it on mobile? On desktop it works for me

I'm on Chrome for Android. I tried turning up the brightness and turning off the eye comfort shield and couldn't see it.

I took a look on my desktop and I can just barely see it. I think if you kept the blue background it would be easier on both platforms.

Re: SVG Tutorial

#89
I love this article and the fact that someone is giving more attention to "write SVG code directly just like HTML+CSS", rather than the usual "just draw with the mouse in Inkscape/Illustrator/etc. and export as SVG".

Re: SVG Tutorial

#90
post #89

I love this article and the fact that someone is giving more attention to "write SVG code directly just like HTML+CSS", rather than the usual "just draw with the mouse in Inkscape/Illustrator/etc. and export as SVG".

True. When you make art with CSS then you don't start with Illustrator either
Post reply on HN