Search the Community

I have tried bringing in a PNG and a PDF created by a mind map app. I then wanted to export as an SVG. When exported the SVG files "seems" okay on my desktop (i.e. I see a miniature version of the mind map). But if I try to open in Preview I just a white blank canvas. Ditto if I try to embed on a website. Is there something I'm doing wrong? Or does Designer not export to SVGs well when starting with a PNG or PDF? I've attached both the Designer file and the exported SVG. I'm not a graphics design professional so there may be some key step I'm unaware of. mytest.afdesign mytest.svg

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.

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!

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.

Hi every one, Assalam Alikom I have been sent Affinity file to my friend because I want her to make some edits. She use illustrator so she cant open the file. I also try to export it as SVG but it is not clear. therefore, how to open affinity files in illustrator and being able to edit it? I attache the affinity file. Regards vector الدرهم.afdesign vector الدرهم.afdesign

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'.

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 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.

Hi. Is there a way to edit imported sag files? I made some sine curves in "Grapher" and exportet to PDF. I tried to convert them to curves, which did nothing. Same with SVG files. I want to edit them, so that the sine curves do not overlap the whole graphic. I want to crop it. The vector crop tool is just a rectangle, which does not work for me. You can see in the Screenshot, the yellow curves overlap. I want them to be just inside the speech bubble. Anyone knows how to do this? A just can't use boolean operations like substract, ect. They are greyed out.

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.

OK, so one of the first things I do when looking at a new piece of software is see if it is "truly" compatible with Adobe illustrator. That is, it can not only import but export a usable file. Just about every software I have used cannot export gradients without breaking down each color into little bands or rasterizing it. Xara Extreme is the only one I have found thats works well, though they only have a PC version. It seems Affinity Designer is one that does NOT work will with exporting eps or svg files with gradients. Although it says that it can, and there is even a check box that allows files to be editable as a vector file, if there is any object overlapping, if there is a gradient, forget it. In fact, I created a box with a single color and one curve, exported as a eps, and it converted it to a bitmap. (see attached). One of the second things I do is see if I can draw a straight line at a specific angle, or at a angle specified in snap mode. I didn't find that feature yet. Anyone? I create stock illustrations and these stock sites insist on editable EPS version 10 files, no bitmaps objects. I'm think I did not find my replacement for Illustrator. ___ This make this software totally unusable for me. SO, I was hoping that someone could prove me wrong and show me how this will work.

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..

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?

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

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.

As suggested in another post, here's a feature request. In Export Persona, I can export slices to PNG, TIFF, etc. But not SVG. Could support for exporting slices to SVG be added? This would be very useful for me! Thanks, Graham

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.