i'm building a website and wanted to display a bunch of international (pretty obscure) characters on the splashscreen. out of concern for platform-specific system fonts, instead of typing in those characters as text, i want to embed them as SVGs. does anyone know of an easy way to take the glyphs i'm seeing in my keynote / pdf and convert them to SVGs?
tried a bunch of things - converted keynote to pdf and used several online pdf->svg converters, but that misses some obscure characters and returns a misformatted svg. tried copying and pasting the text into figma and exporting as svg, but figma doesn't render more rare international fonts. i just want to take what i'm seeing on my screen and make those SVGs.
The only thing that occurs to me is to open the fonts or drawings in an editor like Adobe Illustrator or Inskcape and edit them there and download them as svg
Related
I am working on an application in which I need to support a text box where certain strings are converted to symbols, i.e. custom emoji. The symbols require color and which are not part of any existing emoji set as far as I know. How can this be accomplished?
I looked into making my own font via FontForge and drawing the symbols as svg files. However, so far I have not figured out how to support color.
I have an SVG graphic that I want to put some text on from my PHP variables. The graphic was generated in Illustrator and resizes in my web page to 100% width. Here is a representation of it:
How could this be done for the 8 text items? Does something special need to be done in Illustrator, like creating an anchor point for the text? How do I update the text item? I've done research but haven't been able to find a similar situation.
Thankful for any information that could help me narrow down my search.
Being someone who has never worked with files of .SVG file type before, this was a misunderstanding.
If you design a graphic in Adobe Illustrator, save it as an SVG and edit it with your favorite text editor, you will be able to see the SVG mark-up. It all makes sense now, and here you will be able to change the text at the code-level.
For my application, I saved the SVG as a PHP file and did an include on it, while changing the raw text to PHP variables in said file. This allowed me to pass my dynamic text as variables to the graphic.
I'm generating some simple svg for data visualization and as part of that I need
to render several lines of text. I'm using the simple text/textspan. However when
determining when to break the line, I need to know the width of the string. Note that I am not using javascript, these are static svg diagrams. My manual mockups work fine on all three platforms(Mac/Windows 10/Linux) in several different browser. I've been searching, but all attempts to find anything about string widths involves dynamic SVG and javascript. Is there any data anywhere on the character widths of the default fonts? I'm using rather simple svg. I'm using the default transform and coordinate space as well. Or do I have to write a javascript test page to return the widths?
Thanks.
The standard font is determined by settings of the renderer. Browsers will use the same font they use for HTML content, set by the user and depending on fonts installed on their system. That means text size will differ for each end user.
There is no way around measuring the text after rendering.
I was browsing SVG fonts in MDN, where it is mentioned that <font-face>, <missing-glyph>, <hkern> and <vkern> are depreciated. Only <glyph> is not depreciated. It does not mention anything about a recommended way of specifying the font face properties.
The W3C SVG recommendation also does not say anything about an alternative way of specifying SVG fonts, apart from noting that everything in the <font-face> can be done equivalently in CSS. It does not provide any alternative for <hkern> or <vkern>. I intend to create a standalone SVG file, not to be modified by the site CSS, so I would like to keep the whole font definition in the SVG.
So, what is this obscure new way of specifying SVG fonts?
"SVG fonts" as a data file that uses SVG markup to define a font resource has been deprecated; it turned out to be a bad idea, and ended up not addressing the issues that typography on the web needed addressing. It was added in SVG 1.1 but removed again in SVG 2.0, and almost all browsers that did end up adding support for it removed that support again since.
Instead, all browsers now support "webfonts": regular OpenType fonts packed for the web using the "Web Open Font Format", aka WOFF/WOFF2, based on the OpenType format, which supports several different outline types:
TrueType (quadratic curves and compound glyphs, often with ttf extension, but the extension is literally irrelevant)
Type2 in CFF/CFF2 (cubic curves and arbitrary subroutines, often with otf extension, but again: the extension is wholly irrelevant)
Embedded bitmaps (yes, OpenType fonts can indeed be true bitmap fonts, with as many different bitmaps as necessary to cover as many pixel sizes as necessary)
SVG (that might be surprising, but SVG is the exact same kind of vector graphics language as TT and CFF/CFF2 are, so it made sense to allow glyph outline data to be specified using SVG as well, particularly for fonts that need explicit colour palettes, like emoji fonts)
So if you absolutely need to keep your SVG data around, then make yourself an OpenType-with-SVG-outlines font, and then pack that for the web as a modern WOFF2 (or older WOFF) and you're good to go. There are plenty of online tools to do that for you, but you can also just use something like the open source FontForge application if you want a font that only includes what you need, instead of what online tools foist into them.
Is there a quick way to change all text containers so that the anti-alias setting is "Use Device Fonts"?
I am using Flash CS5, and need to convert about 300 animations, each with 20 or more text boxes, so that they use device fonts. This is necessary so that we can more easily display traditional Chinese characters.
I can go through each text box, change the font to _sans and it automatically switches to Use Device Font - then I don't need to embed the font files. So I tried to use the Find and Replace tool to change the font on all text boxes. It worked fine at changing the fonts, but it did not auto-switch the anti-alias. Any help on this would save hours of work.
Thanks.
Hopefully you're not too far into your work on this one, but there's a new development with CS5 that will help you with just this. It's called the .xfl format, and all .fla's are actually this format, but zipped up. Have a read here for more info: http://blog.theflashblog.com/?p=1986
What this means is you can convert your fla to xfl (or just change the suffix to .zip and unzip as the above article suggests), and do a Find&Replace on all text field font values.
Hope that helps!