I need to export Illustrator files to svg. Illustrator "save as svg" does a horrible job. In particular we need to maintain text elements on a curved path so that they're still editable in the svg file. The svg will be dynamically edited via javascript in a web browser based on whatever text a user enters.
I would like to test with a single example. If all goes well, there would be about 100 designs to convert. This project is just for converting the single example.
Attached is the Illustrator file ([login to view URL]) that needs to be exported to svg. Also attached is a png ([login to view URL]) of what the svg should look like. Also attached are the fonts used.
Again, the svg needs to text elements that are editable, so for example "University" can be changed to "College" (or anything else) by simply changing the text content of a single svg <text> element.
All text elements should also be centered, so that if I change "University" to "College" it gets centered. Same for the "MEMPHIS" and "DAD" text. See attached CL89-new-text.png.
For the fonts, feel free to use this <style> element in the svg which has correct web font references:
<style
type="text/css">
<![CDATA[
@font-face {
font-family: 'Pro Block';
src: url('[login to view URL]');
}
@font-face {
font-family: 'Swis721 BlkCn BT';
src: url('[login to view URL]');
}
@font-face {
font-family: 'Square721 BdEx BT';
src: url('[login to view URL]');
}
]]>
</style>
Each text area ("university of", "memphis", and "dad") needs to be in a separate svg <text> element.
For example, here's what the University Of text element should look like in the outputted svg:
<text>
<textPath>
<tspan style="font-family:'Swiss721BT-BlackCondensed'; font-size:30px;">UNIVERSITY OF</tspan>
</textPath>
</text>
Big bonus points if you can set up script in the outputted svg file to automatically update the size of the blue background with the curved borders. So if I change the text via javascript from "DAD" to "BROTHER" the blue background should grow to fit around "BROTHER". See attached CL89-blue-border.png.