Search the Community

Hi, I've just been experimenting with exporting to SVG and importing the code into HTML so I can restyle with CSS but after trying a few options (not all of them...) it seems every path has a style already set which overrides my CSS style sheet. Is there a way to export without the style tags so I don't have to go through and delete them? Heres an example of what I mean: its the bold bit that I have to delete for every path. <path d="M1082.76,727.84L1002.6,727.84L1002.6,414.882C1002.6,378.12 1000.31,350.549 995.71,332.178C991.114,313.79 980.222,297.89 963.039,284.44C945.843,270.999 926.018,264.265 903.56,264.265C862.376,264.265 827.905,281.12 800.172,314.815C772.43,348.511 758.564,393.607 758.564,450.107L758.564,727.84L678.414,727.84L678.414,30.9654L758.564,30.9654L758.564,307.161C794.98,234.328 847.06,197.899 914.793,197.899C945.08,197.899 972.051,203.861 995.71,215.774C1019.36,227.686 1037.48,243.345 1050.08,262.745C1062.67,282.145 1071.27,301.286 1075.86,320.174C1080.46,339.061 1082.76,370.645 1082.76,414.882L1082.76,727.84Z" style="fill:black;fill-rule:nonzero;"/> thanks Gary

Hello! 1. It will be nice to have an option to set defaults for svg export. For example default width and height are set to 100% by default and this is not good in most situations. 2. To be able to export svg i need to change app mode to EXPORT. Can you please add SVG file format to standard "save" dialog?

Sometimes it's important to make sure in the exported SVG files, each ID is unique among multiple files. It would be great if there's a way I can set up a namespace, or prefix to all IDs (a.k.a layer names) when exporting to SVG.

Is it possible to export selected object(s) as SVG? I need to export to SVG in order to drive a vinyl cutter. If this isn't currently possible, is it on the roadmap to be added?

The only major thing holding me back from using Affinity as my full time vector image tool is the import handling of vector images. I use eps files a lot in my work and when I import(place...) an eps file it gets saved on the layer as an embedded document. I then have to double click on the image to edit it. Then I need to double click on that image to select its curves. I next copy its outline, go back to my original document and then I paste the outline into my document. I then need to delete the imported image(embedded document). If I don't do the above process, The image will not print(cut). Is there any way that Affinity can turn on a user preference that will allow a user to select if they want to import images as embedded documents or converted as curves upon placing them in the document? Or, provide a button that can be clicked to automatically convert to curves instead of doing the above procedure? I know this has been asked before but I haven't seen a definitive answer if this is something that will be available soon or not. It's this and curved text that is preventing me from cutting the strings on Illustrator (I can wait for the other goodies on your future upgrade path). I am using the beta.

I know this will probably take a lot of work but I'd love a good toolkit to animate my SVG files for the web. Icons, ui elements. SVG is becoming a more prominent and important part of webdesign however, it takes way to much time to fine-tune an animation, not to mention the amount of repetitive code for really simple animations. As proven, you guys know how to make very easy-to-use environment for complex stuff, so I can't imagine how fun it would be to tweak my animations within the Affinity environment. Or just an all new piece of software!

The attached image is made of simple strokes and results in a raster when exported as an SVG (raster inside SVG). I've even tried to expand the strokes and then export. Even then, with no brush used, it results in a raster. I've play with PDF and EPS too. I can't seem to get this graphic out as a vector. Suggestions? Cheers.

I downloaded the AD trial version onto my Macbook Pro running 10.7.5. I have no trouble running the Adobe CS/CC apps and my machine meets all the minimum requirements for your app. Whenever I try to export any file as an SVG (even just a simple circle or square), nothing is created. No files show up anywhere. Other export methods do work. Then after trying the SVG export, whenever I try to close the file, I get the spinning beach ball and must Force Quit the app. Is this a known bug? Do you have any recommendations? I really wanted to like this app as an alternative to Illustrator but if it's this unstable and unusable, I will need to look elsewhere. Thanks for your time.

The question is in the title... is PDF / SVG export functionality fully implemented? I ask because in my test cases I'm seeing gradients, and shapes with effects getting clipped + rasterized rather then being fully editable gradients + effects. Ideally any effects should use SVG filters when exported. This was always a problem I had with DrawPlus. I often had to export out at really high DPI to remove any gradient dithering, and import it into Illustrator where I vectorized the rasterized portions. The results I'm getting right now are disappointing. Though the PNG export from a large vector files is incredibly fast, and clean. Nice work there.

When you export an SVG, whole document gets exported. An option to export only the image (shapes), without empty portions of background page would be very nice.

Just purchased AD and spent some time test-driving it -- feels nice, intuitive UI. Personally, I was very interested in SVG export for web work and I was happy to see it under the supported formats. Having done a quick test, it certainly worked but I had to edit the SVG file afterwords to get it working 'responsively' (sized via CSS, using percentages). Currently, the SVG is exported with its size determined by the 'width' and 'height' attributes. For example, an object defined as 50x50px object will have width="50" height="50" baked in. By replacing these attributes with viewBox="0 0 50 50", the size can now can be controlled using CSS, e.g., svg { width:100%; } It's an easy manual fix but it would be great to have the option setting available during export..

Hallo Affinity Team, I'm looking for an alternative to Illustrator and have tried out Affinity. Unfortunately, I'm rather disappointed with the SVG Export in Affinity. Some layers in my vector graphics are coded as inline PNGs (data:image/png;base64). It would also be nice if the layer names were also exported in the SVG, so that I can target them in the code later. Thanks, Gary

Icon Fonts are a brilliant way to manage scalable art for the new flat world of web and app design and quickly becoming more popular: http://fontawesome.io https://icomoon.io http://fontello.com Request: Font Designer Persona - Affinity Designer is well positioned to provide THE ultimate on designer tool. The first step is to enable exporting of slices to SVG. This could be followed by more enhancements up to and including generation of font files (or json) and supporting CSS. With the ubiquity of icon fonts, font editing is not just for font designers any more. Creating a page with a grid of slices for each character in the font would be great and remove the tedious steps of creating slices around hundreds of icons. Have a look at http://www.glyphsapp.com and cover a few high value holes. I have only just begun my own research and experimentation on this topic. I going ahead with creating most of my app artwork as an icon font but I cannot use AD until SVG slice export is available. I hope others will agree.

It would be great if there was an option on the export to make the SVG minimal in file size. As an example, right now it is producing SVG at 11kb but when I "clean" them they drop down to 7kb. It would be great if this could be done in all one step.

Hi I know you've already got a ton of stuff on your list of things to do, but is there any chance of adding support for accessibility features for SVG on export? (and preserving them on import if they are already there) http://www.sitepoint.com/tips-accessible-svg/ I think it boils down to the ability to add <title>......</title> <desc>.......</desc> at the beginning of the svg document. As well as, if possible, aria-labelledby="title desc" role="img" to the <svg> tag. If you could enter this information at the same time as you do the export then that would be one less thing to remember. This is all stuff that can be easily added with a text editor so it would come under the heading of 'handy-but-not-essential'.

Hi I've just imported an svg file, copied and pasted it into another, did some resizing, changed the layer names, and then exported the combined document (a map with place names) to svg. I ended up with circles being converted into paths. To give one example: <circle cx="210.4" cy="230.6" id="Genova (w9) marker" r="3" class="style0"/> <g id="Genova (w9) label" transform="translate(0,0)" x="215.4" y="230.6"> <text id="Genova (w9) name" x="215.4" y="230.6" class="style1">Genova </text></g> was converted to: <g id="Genova marker"> <path d="M215.887,281.212C217.745,281.212 219.251,282.719 219.251,284.577C219.251,286.435 217.745,287.942 215.887,287.942C214.028,287.942 212.522,286.435 212.522,284.577C212.522,282.719 214.028,281.212 215.887,281.212Z" style="fill:black;fill-opacity:0;stroke-width:1.12px;stroke:black;"/> </g> <g id="Genova name"> <text x="221.494px" y="284.577px" style="font-family:Verdana;font-size:11.2154px;fill:black;">Genov<tspan x="257.112px 263.848px ">a </tspan></text> <text x="221.494px" y="295.792px" style="font-family:Verdana;font-size:11.2154px;fill:black;"> </text> </g> Is there a way I can get it to retain the circles as circles so that I can more easily change the radius? Thanks.

EDIT: Sorry I forgot to check the answer to my question in the questions section. I'd have deleted this thread but there doesn't seem to be a way to do that. At the moment if I import a file with a bunch of svg shapes Affinity converts these to paths. It would be really handy to be able to preserve these as svg shapes. For example if I have a bunch of map markers that look like this: <circle cx="168.5" cy="581.2" id="Alghero marker" r="3" class="style0"/> <g id="Algherolabel" transform="translate(0,0)" x="173.5" y="581.2"> <text id="Alghero name" x="173.5" y="581.2" class="style1">Alghero</text> </g> I can easily change the radius of the marker from 3 to 2 by using search and replace in a text editor (I can't see any way to do the same thing with multiple paths - but maybe that's my ignorance). Webcode and Sketch do this (although in other respects I much prefer Affinity). Thanks.

Hi Thanks again for the improvements to the SVG export in the Beta. Would it be possible to have the option to group CSS statements at the head of the SVG document (along the lines of what CSS Optimiser does)? Thanks.

Dear developers, Is it possible to add the viewBox tag to SVG export? It could echo the width and height tags for instance (that would be relatively easy I think). I appreciate the SVG output of Designer: it is among the cleanest I have seen.

Hi I don't know if this is a question or a feature request. I'm working on a map for a website, and what I'd like to do is use CSS to control the fill colour for a particular region. So I want to tinker with the svg in a text editor. The only problem is the layer names aren't preserved when I export to svg. Am I missing something? Is there a way to preserve them?