I am migrating from using the standard JPG and PNG to using SVG files for images to maintain a high quality. I am creating images in Photoshop, saving them as PSD opening them in Illustrator and saving them as SVG and finally uploading them to my website, pure vector images seem to work fine, however I am having a problem with text being rendered correctly. Does anyone know what might be causing this?
I have a link with an example here http://liamhodnett.com//img/case-study/wags-whiskers/banner.svg
Thanks guys!
Convert the text to paths in Illustrator.
If the font is not installed on the user's machine its rendering gets weird. If you have a logo or similar you should convert all text to paths to be safe, except it is of semantic importance to you.
You'll need to convert the SVG files into a workable webfont.
You can use a free web-service such as http://www.icomoon.io and upload/convert the files as needed, and download a working/converted zip file with all you need.
If your running a WordPress site, I've developed a plugin that will allow you to upload SVG files to icomoon, download the .zip and then upload the .zip to the plugin. From there all the icons you've included in the .zip will be useable on your site with no code on your end required.
http://wordpress.org/plugins/svg-vector-icon-plugin/
Good luck!
Related
I am absolutely a novice in the field of html / css programming. I have a font file with extension .woff etc. I know, I may upload it on a server and later on use it with the help of css files generated from tools like fontsquirrel. However, I want to explore the option of getting the font into simple html or css codes so that I may use it on forums like blogger without having to host the font file elsewhere. Is it technically possible? Thank you.
I'm trying to generate webfont from SVGs using grunt-webfont.
The issue is that I need this task to be valid on windows and linux machines. In order to achieve this I need to use the node engines that doesn’t work with some SVG files.
I would like to know if there is a way to convert my SVGs to a proper SVG format that will be supported by this grunt plugin or alternatively is there a better grunt plugin/s to achieve this
I would like to have a task that will be able to take my SVGs (created in illustrator) and output webfont files (.eot,.svg,.svg,...) and a css file (like icomoon export)
Thanks.
Perhaps your artboard is too small. I recommend checking that you have a 512pt x 512pt artboard for each icon. I stumbled upon this gem (https://www.fourdigits.nl/blog/using-a-webfont-to-display-icons) when the grunt-webfont documentation left me alone in the forest.
All the docs says is that it might not work with some SVG files. You really should try to convert your files first and then ask what to do with the files that don’t work well.
If I embed icons in the CSS file and refer to the style name in action script code, is that a good practice? Will that increase the swf size?
Any help would be really appreciated.
Thanks,
Gurjaspal
Yes, whatever way you choose, the font face will be embedded inside the SWF file.
Two ways to limit file size when using embedded fonts are :
Include only the needed character range. See this page for more information.
You can embed fonts in the main application and reference them in other parts of the application that are loaded later on (modules or their stylesheets)
Yes... Embed away. Flex has many built in compression algorithms that do a fantastic job of reducing file size. I've tried to optimize this process myself when building for web delivery and ultimately I could not get the file any smaller than flex could embedding the assets natively.
EDIT:
My assumption on adding this second answer is you were asking about icons (imagery) and not fonts.
I have tons PDFs that I need to convert to some structured format that I can interpret (HTML/XML/etc)
PDFs are in this format:
http://img840.imageshack.us/img840/5407/pdfv.png
I have tried so far a lot of softwares that convert to HTML but all of them have no capabilities to separate the images, they just take like a printscreen of the page without the text and then use this image as a background in the html, using css to position the text
Like this: http://img37.imageshack.us/img37/5015/examplelp.jpg
I have a bunch of PDFs so process each ones images manually is not an option. Does anyone knows any solution for this (even paid softwares)?
I had a similar problem a while back and ended up writing my own solution. It's called PDFX and it's free to use. It converts PDF to a structured-format XML and also renders any bitmap images (not vector graphics) found in the PDF separately.
Example input/output can be found here. You might want to give it a try.
What is the best practice for importing text into html from a multipage InDesign document, from designer to non-designer. Document designed on a mac going to CMS on PC - hand off the InDesign File or strip text into word file? Supplying all images and pdf as go-by?
More people are likely to be able to open a PDF than InDesign, especially with font considerations. I prefer to get work in PDF format. I can easily extract the text and I can pull the document into PhotoShop to slice it up. You just have to make sure the quality/compression settings are right so it doesn't muck up the JPEGs too much.