Jump to content

Search the Community

Showing results for tags 'SVG'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Affinity Support
    • News and Information
    • Affinity Support & Questions
    • Feature Requests & Suggestions
  • Learn and Share
    • Tutorials (Serif and Customer Created Tutorials)
    • Share your work
    • Resources
  • Bug Reporting
    • Report a Bug in Affinity Designer
    • Report a Bug in Affinity Photo
    • Report a Bug in Affinity Publisher
    • (Pre 1.7) Affinity Range Bugs Forums
  • Beta Software Forums
    • Affinity Designer Beta Forums
    • Affinity Photo Beta Forums
    • Affinity Publisher Beta Forums

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 361 results

  1. I need Designer to create icons - to be used in web applications. To avoid scalability and quality issues, I always export my icons as SVG documents. Version 1.6.x support for SVG was limited. For example, drop shadows were being exported as separate bitmap files, although SVG can handle shadows just fine. I was hoping that v. 1.7 would have resolved this issue, but that doesn't seem to be the case. I did a test by importing an SVG image of a circle with a drop shadow. Unfortunately, only the circle was imported... I find this lack of attention for SVG very dispiriting for an otherwise excellent application. I just hope I am missing something, but I am not holding my breath.
  2. Hi, I've been studying the best way to export to Adobe Illustrator since many of my clients request the final file as .AI, and of course I prefer to work using Affinity designer, but I'm having some problems with PDF export getting many annoying rasterized shapes and images, for now I see that SVG (export for Web) is the best option for while, but still have some small bugs opening in another vector software, in this case, I notice that if you export svg and try to edit its contents: Transparency Tool with Gradient Tool / Gradient Tool - fill mode Ellipse If you apply these both tools in a path/shape, the SVG create many "groups" of layer and raster with clip, that is not very optimized Strokes with rounded corner become with points (no bezier path) Some case of using Layer fx or a complex vector object the layer become raster (image with clipping) Opening the same SVG exported on Affinity, the bug is the same Well for while the bugs seem more about optimization for SVG files, as I need to export to Adobe Illustrator in order to deliver the files to my clients, it is possible in somehow future to have an option to export as AI, would be perfect and less overwhelming while working with both software, I really wish the best of luck for the Serif to be bigger than Adobe is now. anyway, thanks once again. Jhonatan
  3. When exporting a rectangle to svg without effects the result is as expected: <rect x="420" y="260" width="460" height="200" style="fill:#ebebeb;"/> But when we add an effect, like gaussian blur to that rectangle the svg-exporter automatically generates a wrapper-group around the element just to apply the effect: <g style="filter:url(#_Effect1);"> <rect x="420" y="260" width="460" height="200" style="fill:#ebebeb;"/> </g> This is what I would expect instead: <rect x="420" y="260" width="460" height="200" style="fill:#ebebeb;" style="filter:url(#_Effect1);"/> I understand wrapper groups could be a way to stack effects if we want to use more than one effect on an object (although even then svg allows filters to be chained via their 'in'-attributes), but that's not the case here because we just use a single effect. If we only apply one effect to an object, in my opinion the effect should go directly to the style-attribute of the element itself instead of creating additional groups and with that changing the hierarchy of the layout. Also when having more than one effect applied to an element the first effect should go in the style of the element itself. Adding these additional groups makes the svg output overly complex and large and in Javascript we now need to keep track of/set two different elements when controlling attributes both on the element itself as well as switching the single effect of the group above dynamically. I might be missing something here, but I searched through all of Designer and in the svg-exporter options, but couldn't find any setting to prevent these extra groups to be created on exports. I also tested this in the last Designer beta (1.6.5.112), but it has the exact same behaviour. Please add at least the first effect to the svg-element itself and prevent adding groups as much as possible. [edit] Please put svg effects directly to the graphical element or use svg effects chaining instead. Don't create additional groups/change hierarchy. Leave the structure in svg output 1 on 1 the same as created in Designer. And meant by the designer
  4. Looking at the SVG output at the moment SVG's always get a 100% width and 100% height, meaning they always scale up or down to a parent-window (in a browser). But there are a lot of usecases we don't want SVGs to scale on websites and if we do it would be nice if we could set how the responsiveness would behave, so to wich windowborder the image would stick and if we want to keep the aspect ratio while scaling. These are all very simple SVG attributes that only have to be added to the svg when we need it. Browsers are doing the rest. At the moment there is no setting in the SVG settings to turn the auto scaling (100% width/height) behaviour off in the SVG, meaning we have to manually take these attributes out of the SVGs each time we export an SVG if we don't want autoscale. It would be a lot easier, faster and less time consuming if we could just set these settings once inside the SVG export options to save it with our own preset. So what I ask for in the SVG export settings dialog is: - A switch to choose between using document width/height (keep size) or 100% width/height (auto scale) - A listbox to choose the 'preserveAspectRatio' attribute in the SVG so we can set this to: - none, xMinYMin, xMidYMin, xMaxYMin, xMinYMid, xMidYMid (the default), xMaxYMid, xMinYMax, xMidYMax, xMaxYMax (as described here: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio) These are important settings for exporting SVGs for Web and not very difficult to add to the dialog cause they only change 3 attributes in the svg tag. But they speed up the process of SVG exports a lot because these changes don't need to be made by hand in a texteditor after each export! Thanks!
  5. So, I generated this SVG file in Affinity itself and saved everything perfectly; as shown in the Opera view and also when I open in Inkscape, the SVG file is working perfectly (attached prints); only that, when I re-open the SVG file in Affinity, the layers that were one inside the others - to generate the format of the photo - get lost; they remain in the file, but as if they were hidden below the photo. I guess it's not intentional and, as seen, I'm reporting it as a bug. Thank you, guys
  6. I've downloaded Affinity Designer Trial to see if I can get it to export an SVG of a purely vector design. For this project, it's incredibly important that the final product be an SVG that has zero rasterized elements in there so it can scale to multiple screen resolutions. The problem is that, while I've got the design looking good (well, as good as I can get it, being a programmer and not a designer!), when I export to SVG **without rasterizing unsupported effects** -- which I thought SVG supported shadows and gradients on a transparent background, right? -- the file has neither of those. I've attached the afdesign doc and a resulting SVG. Tried reading said SVG in Chrome and Firefox as well as Apple's Quick Look (which I believe uses Preview's built in magic magicness) and the shapes and colors are fine, just no drop shadow, no gradient, no transparency. Input appreciated. Thanks all. SVG Looks like this in quicklook: Postal Logo (Affinity) 2.svg Postal Logo 2.afdesign
  7. I have started to author SVG elements for web design using affinity designer, but the svg code it outputs is quite heavy and messy (using copy as svg option in preferences). In this case I think its because I have an object that is rotated 180 degrees, so its running transformations on my paths and groups in the SVG code. Is there any way to "bake" the transforms in designer. So say I move, rotate, and scale an object, then I would like to bake its transforms so that the shape is rewritten (svg code wise) as not rotated or scaled, in essence applying my modifications to the objects underlying definition. This is a very common practice in 3D modeling. <svg width="100%" height="100%" viewBox="0 0 1152 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"> <g transform="matrix(1,0,0,1,-4757,-100)"> <g id="Header-Shape" serif:id="Header Shape" transform="matrix(-0.848306,-1.03888e-16,1.26688e-16,-1.03448,5909,5615.86)"> <path d="M1358,5187C1131.5,5217.42 905.5,5235.33 679,5235.33C452.833,5235.33 226.167,5217.47 0,5187.13L0,5332L1358,5332L1358,5187Z" style="fill:url(#_Linear1);"/> </g> <g id="Header-border" serif:id="Header border" transform="matrix(1,0,0,1,-843,-237)"> <path d="M6752,486.861C6560.14,455.482 6367.86,437 6176,437C5983.86,437 5792.14,455.529 5600,487L5600,486C5792.14,454.529 5983.86,436 6176,436C6367.86,436 6560.14,454.482 6752,485.861L6752,486.861Z" style="fill:rgb(46,46,46);"/> </g> <g id="Header-border1" serif:id="Header border" transform="matrix(1,0,0,1,-843,-238)"> <path d="M6752,486.861C6560.14,455.482 6367.86,437 6176,437C5983.86,437 5792.14,455.529 5600,487L5600,486C5792.14,454.529 5983.86,436 6176,436C6367.86,436 6560.14,454.482 6752,485.861L6752,486.861Z" style="fill:rgb(56,56,56);"/> </g> </g> <defs> <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-3.24818e-14,-145,176.823,-2.66361e-14,1358,5332)"><stop offset="0" style="stop-color:rgb(64,64,64);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(51,51,51);stop-opacity:1"/></linearGradient> </defs> </svg> This is what I get right now as output, but I would like to not have any of the "Transform=" and "gradientTransform=" attributes, more like the follwoing striped down code, which dousn't work because of how Affinity outputting the code: <svg width="100%" height="100%" viewBox="0 0 1152 150" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g> <path style="fill:url(#a);" d="M1358,5187C1131.5,5217.42 905.5,5235.33 679,5235.33C452.833,5235.33 226.167,5217.47 0,5187.13L0,5332L1358,5332L1358,5187Z"/> <path style="fill:rgb(46,46,46);" d="M6752,486.861C6560.14,455.482 6367.86,437 6176,437C5983.86,437 5792.14,455.529 5600,487L5600,486C5792.14,454.529 5983.86,436 6176,436C6367.86,436 6560.14,454.482 6752,485.861L6752,486.861Z"/> <path style="fill:rgb(56,56,56);" d="M6752,486.861C6560.14,455.482 6367.86,437 6176,437C5983.86,437 5792.14,455.529 5600,487L5600,486C5792.14,454.529 5983.86,436 6176,436C6367.86,436 6560.14,454.482 6752,485.861L6752,486.861Z"/> </g> <defs> <linearGradient id="a" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse"> <stop offset="0" style="stop-color:rgb(64,64,64);stop-opacity:1"/> <stop offset="1" style="stop-color:rgb(51,51,51);stop-opacity:1"/> </linearGradient> </defs> </svg>
  8. Hi, I've googled this a quite a bit and seen a bunch of suggested tweaks that satisfied people, but I can't get anything to work, so sorry if this looks like a dupe. I'm trying to export vectors from Affinity Designer to SVG to use for a laser cutter. Every time I do, the SVG is resized. It doesn't matter what resolution or size document I use, or whether I specify an export resolution, or uncheck the "set viewBox" setting, or only export the objects and not the canvas, literally nothing produces an SVG file that preserves the actual size of what I've drawn. I've opened the SVGs in Inkscape, Lightburn, and AD itself, and they're always bigger. The first time I caught it, it had upscaled a 4" coaster to over a foot diameter. Resizing the image in another program isn't the biggest deal if all I'm doing is a 2-D design, but if I'm cutting pieces for a box with finger joints, resizing can throw things off big time. And going from AD to Inkscape to Lightburn just to get the SVG imported for the laser cutter is a bit of a pain, so I'm really hopeful there's a fix here. I've attached AD and SVG files of a simple square to demonstrate what I'm talking about. Specs: Affinity Designer 1.6.5, MacOS Mojave, recent MacBook Pro. Thanks! squaretest.afdesign squaretest.svg
  9. I have a large number of SVG files on my MAC that I use with an electronic die cutting machine. They have always shown up as svg files but are now showing up as affinity enabled so when I open them affinity opens with the file. I need to have it go back the way it was before without the affliction with affinity. How can I do that?
  10. Hi, I have AD on my Mac and my iPad and I have a Cricut cutting machine. I would like to create my own svg cut files but had almost given up because the objects, whilst looking fine in AD, often became randomly scattered and weird when I uploaded to my cutting machine software. Recently, I realised that this was happening whenever I had rotated a shape whilst designing in AD. I am still at the novice stage with vectors but today I noticed the setting 'flatten transforms' in the extended SVG settings and it worked! No more flying objects and the shapes uploaded perfectly to my cutting machine! My question is :- Is this setting something I should always tick when exporting an SVG for use as a cut file and does it degrade the SVG in any way if I wanted to share my file with someone else.
  11. I have SVG file that imported incorrectly in both Affinity Designer and Photo. 112.svg
  12. LeslieHedgesDesign

    Having trouble exporting SVG.

    Hi loves! Super affinity designer newbie. I make logos for clients & for some reason having a hard time exporting to SVG.. I’ve sliced before on most of my designs & I usually have to do it a few times until it magically works. The specific design I created is like another I did & the SVG export worked. For some reason I can’t figure it out. I bought the book & super love it... but it doesn’t go into a lot of detail about exporting sadly. Please help. I will add file & hopefully someone can get it! I know I’m doing something wrong if I have to try to 20 times before not knowing what I did right. Haha. Thanks so so much! Untitled Copy_10.afdesign
  13. Hi. I'm not sure if this is the right place to post this, I apologise if it's not. I got Affinity Designer a few weeks ago, I used it to edit and make a few flags. Now when I open them, they are missing some core features. This flag is missing the Saint Patrick's cross, which is the red X, in the middle of the Union Jack, to the bottom right. It's like this in the UK flag, Australian flag, etc. It didn't use to do this, I'm not sure why now. They don't appear like this in the browser. Attached you can find, the UK flag, and the flag in the screenshot. Please can I have some help? Thank you. Flag_of_the_United_Kingdom (3).svg USERUK.svg
  14. Hi all I quite happy with how I go about setting the pivot point on a shape in Affinity Designer. However, when I export the design to SVG, I want the pivot points to be saved as part of the shape as well. My aim is to rotate items using Javascript in the browser and I need that point, to pivot around (imagine a rectangle for a clock hand or something similar). Is this something I can do in Affinity Designer as part of exporting the shapes? Thanks
  15. I have a dropbox folder with something like 200 assets in svg and am trying to import them. Here is what I tried: 1. Created a category and renamed it - not sure if that was really necessary 2. Clicked on import category and navigated to my dropbox folder and nothing ... there is no button allowing me to import the files. Inserting each one by hand doesn't look like the way to go, I think. So, I clearly don't understand how this works or what I am doing wrong. Any help would be greatly appreciated. thanks
  16. JerryLin

    SVG Problem

    As the screenshot, why the SVG export includes this white square? It won't show on png file. What did I miss? Thanks for any suggestion. svgproblem.afdesign
  17. Hi I am completely new to illustration tools and Affinity designer is the first of that kind I have used. Idrew a picture using pen tool and was trying to export in svg format . It was not getting exported in the first place .I was not able to send it in the email as well.Finally it got saved in the photos but to my surprise it was rasterised version. Please help me understand what went wrong. Why was it not getting exported to file explorer or any other places . Thanks in advance
  18. Hi! I have a weired problem with Affinity Designer... I'm working on the up-to-date version 1.6.5.135 under Windows 10. I have a couple of icons, that I created some while ago (I believe before updating to .135). These icons are saved as .svg and I need them to be pure vectors without rasterized pixel-portions, because MS Visual studio is supposed to find and recolor the hex-color values. I've been careful not to use any effects that were incompatible with SVG (no transparency, no masks etc.) I attach the SVG, I exported some time ago which has been exported without a problem. Opening the .affinitydesigner file also exports without a problem. However - when I re-open the exported SVG and try to save (via export to svg) it (not having touched and altered anything) Designer wants to rasterize certain parts, rendereing the file unusable for me. Is there something, I'm not getting? new export.svg old export.svg original.afdesign
  19. Hi there! I am not british, but this does not look correct: Download the flag of United Kingdom from Wikipedia (Download: https://upload.wikimedia.org/wikipedia/commons/a/ae/Flag_of_the_United_Kingdom.svg) into APh .123 or APh .284 (file -> place) and compare it with the same file displayed in any browser. Best, Volker
  20. I'm exporting an afdesign file as an SVG for a machinist, but the export comes out just over 4 times bigger than the original. Any ideas?
  21. This would be a great feature for people using Affinity to create SVG web icons. SVG supports symbols, which are basically re-usable bits of SVG. For example, given this SVG file: <svg xmlns="http://www.w3.org/2000/svg"> <symbol id="artboard1" width="10" height="10" viewBox="0 0 10 10"> <circle cx="5" cy="5" r="5" /> </symbol> </svg> You can use it in a page as follows: <a class="button"> <svg class="icon"><use href="/images/icons.svg#artboard1" /></svg> <span class="text">A button with a circle.</span> </a> Currently, Affinity exports artboards as transparent rects with an id when exporting an entire document. It would be awesome if we could instruct it to export it artboards as SVG symbols (like the first example), effectively turning Affinity Designer into an end-to-end sprite/icon sheet editor. Bonus feature: an option to export artboard names (outside the symbol element, positioned near it), so that the same sprite/icon sheet can be used for documentation (example: font-awesome).
  22. When opening an SVG file, Affinity Designer will create layers from groups in an unexpected/buggy way. For example, opening the attached test.svg file, which looks like this: <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="256px" height="256px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"> <g id="three"> <circle cx="192" cy="64" r="8"/> <circle cx="192" cy="96" r="8"/> <circle cx="192" cy="128" r="8"/> </g> <g id="two"> <circle cx="128" cy="64" r="8"/> <circle cx="128" cy="96" r="8"/> </g> <g id="one"> <circle cx="64" cy="64" r="8"/> </g> <g id="zero"> </g> </svg> in Affinity Designer 1.6.1 will not result in an empty layer called "zero", a single element layer called "one", a two element layer called "two", etc. Instead, this is the result: That is, the "zero"- and "one"-groups were ignored, and instead we got a single free ellipse with a name taken from the ignored "one"-group's id ... The groups with id "two" and "three" were imported as expected though. This inconsistency makes working with SVG files in Affinity Designer frustrating. I'd like to be able to export as SVG, reopen that SVG and export SVG again, without losing or messing up basic structure like groups and ids ... test.svg
  23. Hi, I'm evaluating AD for creating SVG files in a specific format, required by an internal software. What I see so far in the exported SVG is ok. But instead of getting the formatting in the style attribute <rect id=":24W16" x="261.857" y="244.422" width="26.47" height="30.95" style="fill:#c4d8f9;"/> I would prefer to get stroke and fill like this (result of another software with it's own quirks) <rect x="259" y="214" width="32.5" height="38" transform="matrix(1,0,0,1,0,0)" id=":24W16" fill="rgb(196,216,249)"/> Any export options that allow for this that I haven't found yet? Background: the SVG will be loaded into a HTML page and custom CSS will get applied to the SVG. The inline style in the SVG has highest priority and overrules what's in the CSS. Yes, there is a workaround by making everything in the CSS !important but that is a dirty hack that I'd like to avoid. Affinity Designer is the last in a long list of vector editors I'm trying, saving as SVG seems always a bad compromise, sigh :-( Regards, Jens
  24. Hello all, I have been looking for answers for hours now and haven’t found what I need. I am trying to save and SVG file from my own writing so I can use it on Cricut design space. Below are the pictures of my process. Top left, what the writing looks like inside the Affinity app. I grouped the layers so it is one smooth stroke. I have tried using SVG for export, for web, for printing, flatten, jpeg compression on and off, set view box on and off, add line breaks on and off, text as curves on and off, no matter what, the file looks like the top right image, pretty normal. Then I go to design space... problem number one, the image saves with flat end points instead of rounded ones, bottom left image. At least, it is still the same thickness and smooth stroke image. When I uploaded to the canvas though, I get the bottom right image. A hair line stroke that’s broken up! What am I doing wrong?! I have gone through these forums and tried some of the tips for different SVG saving issues and nothing. I also tried uploading an SVG file that came from a website designed for Cricut files and those turn out fine. They look the same on the site as they do on the downloaded file, the saved box in design space and the final canvas project. This is why I am thinking my issue is how I’m saving it and not related to design space. Any help will be appreciated!
  25. Ok I searched the forums for “svg’ and points”. I’m not really sure what else to search, so I apologize if this was already covered. This is for the iPad :) I drew a black and white image in Procreate, and saved it with no background as a png. Used vectorizer online, to convert it to an svg. i placed the svg into affinity designer im not sure how to edit the points. Or am I totally missing the boat and trying to do the impossible? Boy, this seems like this topic has probably been covered before...I really did look, haha. Thanks everyone!
×

Important Information

These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.