Dec 28 2013
build a FONT with SVGs
Posted by kll · In PHP-Fusion work · 4113 Reads ·
heavy play with WEB software:
try to use SVG to make graphic characters ( get from internet or make with Inkscape )
as a complete font set.
- test with single svg files, all in one svg file and extract by canvas svg file,
- test java code on svg files
- test the svg Glyph
- test the CSS in SVG and deleted it again
and end up with a php approach.
write a php function what convert a string to packed DIV with a inline SVG for each char,
made by the php function from a set of php variable arrays ( 0..127 ) ASCII dec ref.
what you need?
- fonthead.php contains the header and color ( gradients )
- fontarray.php contains the path definition for 128 ACSCII chars.
- a function text_svg($text,$fsize='70',$gradcol='black') {...
called by
$my_text=" my text ";
text_svg($my_text,25,'gold');
in all sizes 5 .. ?? get best resolution ( thats why we use SVG and not images )
color can be
- '' = 'black', '#xxxxxx', for simple color characters
- 'silver', 'gold', for gradient ( 3D ) characters
and test in firefox, chrome and IE9, a IE8fix is open
here already in a test panel in php-fusion CMS.
pls also see at my itune DEMO site.
download
now add some more characters ( for free )
download standalonephp
but in the next revision of ITUNE it will be part of the THEME.
in rev 104 the function allow parameter of 2, for gradient 3 color, and a optional background color,
there was a problem to use different gradient colors in one page ( 2 function calls )
because the browser treats the defs inside the SVG like a CSS, and that must be unique.
i not know a good way to solve that without knowing how many times that function is used,
but i learned from the inkscape program what makes each time a renamed copy of a gradient, what leads to kB unused code in SVG. i now give/use different name for that gradients. each time the function is called! by add a random number to the name.
that's more a hack as a program, but works.
and now also made a bevel filter instead of gradient, limited use because not work in IE9 and need 20% more width...
line1 test new feature, PHP in news and article
line2 line2rest
line3 [insert-php] text_svg('good Time',70,'gold','','','#0000ff','gradient'); [/insert-php] line3rest
pls understand that in line 3 i must write the keyword WRONG to be displayed as code text, do not use insert-php, must use insert_php!
i used the insert php function what i also used in WP ( see below info/link )
now here in php-fusion, and filter the news and article content with it for php commands what need to be executed first.
and that i use here to call my SVG web font function.
pls download stand alone or php-fusion ITUNE theme
in rev 106 work on 3D, means change the characters with moved copy in the background.
in the first step i follow her tutorial.
now i show you my SVG work status not as a picture,
as the real thing in a php-fusion custom page ( that allows php code ) here
( php-fusion news and article usually does not allow php code, but with my latest theme change
ITUNE 7.2.7 V5 it is also possible now )
now just for a test i use on a local test site
WordPress ( a old 3.5.1. version )
and i wanted to test it there also.
- needed plugins:
to insert php in a post ( or page)
WP Unformatted
- and activate them.
wp unformatted needs
new post
post screen options: allow custom fields
add a custom field of 'sponge' set to '1'
php plugin needs inside the post:
[insert-php]
function and call ( like in the index.php of the stand alone version )
[/insert-php]
again, you must use insert_php!
add i copied the font file SVG_PHP_font_silver.php
into the plugins/insert-php/ dir of wordpress
so inside the function i do the include by
$font = 'wp-content/plugins/insert-php/SVG_PHP_font_silver.php';
include $font;
very interesting, with FIREFOX 27 i now have for gradients the same error as i see it with
SAFARI 5.1.7 on win7, while google chrome 32 still works fine.
did morzilla firefox steal some code from apple?
as it is possibly only a different scaling for the gradient i could fix it, but then i need a fix for chrome...GRRRR!
even more confusing is that following example works perfect in all 4 browser.
the obvious difference i notice first is, in the example the stop is in %, the old font i used does not.
but digging and testing ( comparing new firefox and old google )
i found where the difference might be:
gradientUnits='userSpaceOnUse'
that understanding seems to have changed. And fits to that error report
