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 ^^)
SVG Tutorial
81–90 of 113 posts
Re: SVG Tutorial
#82That'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?
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
#83Earlier 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."
But, yes, SVG is an application of XML.
Re: SVG Tutorial
#84I 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.
I'm pretty sure I've heard of D3, I'll have to check it out. Thanks.
Re: SVG Tutorial
#85That'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.
cat was out of the bag
I mean what is worse? Incorrectness, or losing ad revenue :-)
Re: SVG Tutorial
#86Very 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...
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
#87Very 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 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
#88Earlier 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 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
#89Re: SVG Tutorial
#90I 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".