SVG/PNG Fancy Text and Logo Generator

[belham2]

Vovchik,

How can I ever go back to the original Linux world of any other distro when you guys keep coming up with stuff like this here in puppy-dog land??!! This app is just sublime. Awesome stuff, vovchik....I luv it. Thank you for your hard work (and thank you, Fred, for making a .deb as I was easily able to load it in DDog32 )

[vovchik]

@MochiMoppel

Assuming we want a black or gradient or patterned background and we want a character with a transparent stroke so that the transparency would "eat out" or "hollow out" the color of the outline of a character v-s-a-vis the background, "none" as a color for stroke or fill cannot do this in an SVG (none just seems to set the RGBA alpha channel to 0). Colors can, however, be inverted via filters (RGBA), and we have some operators (xor) and "feComponentTransfer" with matrices that might just work. If you have an idea how this might be accomplished with or without a filter, please share. I'd really like to know.

@belham2

Thanks. I think it still needs a bit of work, but is already becoming useful. I would still like to see axis skewing and rotation, more standard filters, Mochi's erosional transparency (if I am understanding things correctly), and loads and saves of user-defined templates (and, maybe, even loading of user-defined filters).

With kind regards,
vovchik

[souleau]

Assuming we want a black or gradient or patterned background and we want a character with a transparent stroke so that the transparency would "eat out" or "hollow out" the color of the outline of a character v-s-a-vis the background, "none" as a color for stroke or fill cannot do this in an SVG (none just seems to set the RGBA alpha channel to 0).

Perhaps I am completely missing the point here, but doesn't the stroke-opacity function cover stroke transparancy levels?

http://tutorials.jenkov.com/svg/stroke. ... ke-opacity

[fredx181]

fred, try this one:
Code:
bacon -o -fno-pie -o -Os -o -fdata-sections -o -ffunction-sections -o -Wl,--gc-sections txt2svg.bac

Thanks for suggesting, i tried, but still is 'shared library'
It's not only for txt2svg, I'd like to know in general for compiling bacon programs, but maybe it's just not possible

Fred

[MochiMoppel]

@vovchik: I'm really sorry to bother you with this again but I don't know what kind of misunderstanding we have here. I simply would like to achieve what I have demonstrated with 2 screenshots on May 9th and 10th. Currently this is not possible because text2svg doesn't support the value 'none' for the fill parameter.

Assuming we want a black or gradient or patterned background and we want a character with a transparent stroke

no, with a transparent fill

so that the transparency would "eat out" or "hollow out" the color of the outline of a character

not the outline, the inner part

v-s-a-vis the background, "none" as a color for stroke or fill cannot do this in an SVG

I don't understand why you keep saying that this is not possible. It is doing exactly that. What it does not do and probably can not do and what may be the effect you have in mind: it can not cut through the background as well, but that's not what I suggested.

I have a similar problem with the transparency for backgrounds. Technically you achieve a background by placing a rectangle with fill, pattern etc. behind the text. For the background I can choose "Transparent" from the dropdown box, which removes the rectangle completely. It's simply not there and like everything not existing it's "transparent" (too bad the glass of champagne just in front of me is completely transparent ). Things change when I add "Bbox". Putting a frame around the background does not remove the rectangle. Instead for the rectangle it sets fill='transparent'. This does not work for me. It results in a solid white background . Only when I manually set the value to 'none' the background becomes invisible, leaving only the frame and the text visible.

Here the code with which txt2svg tries to produce a framed logo with tranparent background. As you see the only parts that are transparent are the rounded corners. And these rounded corners show another problem: The frame, which is set to be 20px wide, appears only 10px wide because 50% of the width is outside of the viewable area. Only at the round corners you can see the full 20px width. Does SVG has a setting to put the frame inside of the area?

Code: Select all

<?xml version='1.0' encoding='UTF-8'?> 

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' 
  width='201' height='295' preserveAspectRatio='none' 
  xml:space='preserve' overflow='visible' 
  viewBox='0 0 201 295' opacity='1'>
 <rect width='100%' height='100%' fill='transparent' stroke='#FF0000' 
  stroke-opacity='1' stroke-width='20' 
  rx='70' ry='70' stroke-linecap='round' stroke-linejoin='round' 
  opacity='1' />
 <g stroke-width='7' stroke='blue' 
  fill='blue' font-family='DejaVu Sans' 
  font-size='200' font-style='normal' font-weight='normal' 
  text-anchor='middle' opacity='1' dominant-baseline='central'   
  transform='translate(0,0)' 
  id='dummy' >
    <text x='50%' dy='200'>A</text>
 </g>
</svg>

[souleau]

I have a similar problem with the transparency for backgrounds. Technically you achieve a background by placing a rectangle with fill, pattern etc. behind the text. For the background I can choose "Transparent" from the dropdown box, which removes the rectangle completely. It's simply not there and like everything not existing it's "transparent"

You need to adjust the opacity and stroke-opacity value in the rectangle definition. Here's an example of your svg with the opacity value (transparancy) of the rectangle set to a half.

Code: Select all

<?xml version='1.0' encoding='UTF-8'?>

<svg xmlns='http://www.w3.org/2000/svg' version='1.1'
  width='201' height='295' preserveAspectRatio='none'
  xml:space='preserve' overflow='visible'
  viewBox='0 0 201 295' opacity='1'>
 <rect width='100%' height='100%' fill='transparent' stroke='#FF0000'
  stroke-opacity='0.5' stroke-width='20'
  rx='70' ry='70' stroke-linecap='round' stroke-linejoin='round'
  opacity='0.5' />
 <g stroke-width='7' stroke='blue'
  fill='blue' font-family='DejaVu Sans'
  font-size='200' font-style='normal' font-weight='normal'
  text-anchor='middle' opacity='1' dominant-baseline='central'   
  transform='translate(0,0)'
  id='dummy' >
    <text x='50%' dy='200'>A</text>
 </g>
</svg>

The value range goes from 1 (non-transparant) to 0 (completely transparant).

[MochiMoppel]

The part you quoted is the case where vovchik uses no rectangle at all. This works perfectly.I have no problem with that.

Your sample code does not solve the problem with outlined rectangles: I want to keep the "Bbox opacity" (opacity of the outline) at 100 and change the opacity of the rest of the rectangle to 0 . How can I do that with the GUI? I want only the outline to remain 100% visible (and the text of course). There is no need to change opacity when using fill='none' instead of 'transparent'.

The value range goes from 1 (non-transparant) to 0 (completely transparant).

txt2svg allows only a minimum of 0.01 (almost completely transparent)

[vovchik]

Dear all,

I am posting a new release in a few minutes. Have added some filters, but, most importantly, I fixed some dimensioning aspects with the bounding rectangle when outlined (transparency, fitting it all into the bounding box). As for MochiMoppel's problem, I think I now understand. There should be an option (checkbox?) to stroke the text without necessarily also using a fill (the Hollow filter does this, though, but then doesn't allow for the application of other filters on the text outline). I will see what I can do to remedy that in a subsequent release.

With kind regards,
vovchik

[souleau]

Isn't the crux of MochiMoppel's problem that he/she wants an extra checkbox under the Bbox section that would either allow a fill, or make fill='none'?

I suppose it has nothing to do with transparancy.

[vovchik]

@souleau, MochiMoppel

I think you are right - just stroke and no fill, and I have implemented that by choosing "Stroke only" in the foreground combobox. It's kind of a bassakwards way of doing it without modifying the GUI and some internal logic, but it seems to work.

[vovchik]

Dear all,

I managed to do some work. There is now template loading and saving. When you save an svg, a log is written that contains all GUI settings. These can now be retrieved via a Template button on the main window (at the bottom). Eventually I have to introduce deletion of entries in the list of templates and, also, user naming such as "Jelly orange on green for project X". Have fun.

The updated source and a Tahr 32-bit binary are in the first post.

With kind regards,
vovchik

[vovchik]

Dear all,

Just added 10 new filters. For source and 32-bit Tahr binary see first post.

With kind regards,
vovchik

[vovchik]

Just bumping my post becase spam appeared from a guy who joined today - made 15 posts and all spam or malware: jamesrawlings973.

[step]

Thanks vovchik, I use txt2svg to give ROX folders their descriptive icon. It's quick!

[vovchik]

@ step: I'm glad it is proving useful.

# all: Just updated and added 7 new filters (Fluid Fantasy is nice)

[vovchik]

@ all: Updated, added more effects (filters/patterns) and reorganized some code.

[vovchik]

@ all: added more patters and effects, fixed up some filters in respect of color fills/gradients, reconfigured patterns vars as a string array. The revised source and a 32-bit Tahr binary are in the first post.

[souleau]

Hey Vovchik, I just tried your logo generator and it is awesome.

Remember the svg wallpaper maker trio created a while back?! I tried that one at the time, and because I use the dutch locale, I ran into the same issue MochiMoppel ran into with your application.
In that thread, SFR supplied a solution to that problem.

http://murga-linux.com/puppy/viewtopic. ... 4&start=95

Perhaps this could be applied here.

I run Puppy Precise 5.7.1 myself, and, like I said, my locale is dutch, but surprisingly, the PNG's turn out perfect. The lettering of the SVG's it generates on my setup are not properly centered, or rather, the center is not properly defined, so they run off the image.

You know, maybe its time to post your creation in the software section of the forum, so that more people can discover your wondeful creation.

[vovchik]

Dear souleau,

Thanks. I am still adding features and testing, but I think I will eventually move it to the software section. I haven't posted this mod yet, but I have included a few of those stamps (andalusia, oriental, etc.) in trio's collection as pattern fills for font and background and they are working nicely. I am amazed at what adjustments to filters/fonts/grads/patterns can do do make stunning effects in 10 seconds or less. It would be nice also to be able to skew the x and y axes and to position text along a path. I am thinking.

As for your "comma" problem, musher0 pointed that out. I included a LANG setting in the code, but it doesn't seem to be working as expected. Musher0 suggested an easy fix - a little (one line) bash script:

Code: Select all

LANG=en_CA.utf8;txt2svg 

as a launcher, to prevent malfunctions due to locale. What do you think?

With kind regards,
vovchik

PS. Your turblulence SVG is now in the background colors/patterns as Nature1, and as a font fill as Busy1 and Busy2 (filters combo box).
PPS. Will now update source and binary with new filters/patterns and a launch script that sets the locale.

[SFR]

Hey Vovchik

Regarding the 'comma' problem - this is quite crude approach, but seems to work just fine:

Code: Select all

		FOR j = 2 TO text_lines + 1
			mysvg_b$ = mysvg_b$ & \
				"    <text x='" & align_no$ & "%' dy='" & REPLACE$(STR$(j + ((j-1) * .122)), ",", ".") & "em'>" & \
				TOKEN$(IMAGE_TXT$, j, NL$) & "</text>" & NL$
		NEXT j

I think 'opacity' also needs this treatment (from Musher0's SVG):

Code: Select all

text-anchor='middle' opacity='0,64' dominant-baseline='central'

Greetings!