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 354 results

  1. Hi there, I'm trying to export a layer as an SVG, but when I open the finished product, there is a border around it (I think it is from the artboard). Wondering if I can set it so every layer can be exported without a square border around it. More detail: I have a file setup as a grid of artboards (see attached) and I want those objects (with no border) exported as an SVG. Looking something like this: Switching to Export Persona, I have slices of every artboard and in this case select "Page 1" to export as an SVG. I can see that every slice has a little symbol of a pentagon and a circle surrounded by a purple square border. I've seen in tutorials that this symbol can be just the shapes colored yellow (this is what I expect I want to have in this case). So the Exporting looks like this: After saving it off and opening the resulting SVG file, I end up with the desired objects from the layer, but I also have a rectangle surrounding the whole thing. It looks like I can delete it manually and save it off again to just get the objects in the layer. I'm wondering how to set it so I don't get a border of where the artboard was in my outputted SVG. So I want to stop exporting the highlighted rectangle: Let me know if you need clarification. Thanks in advance for your help. Here's a test file: svg_export_testing.afdesign Best, Zach
  2. It would be nice if there was a way for Affinity to built animation and even export to MP4, GIF or better pure HTML/JS/CSS (SVG) to use on websites. The web keeps getting better and better, but the creative animation tools for the web are limited. There are a few tools if you search for it, but its subscription-based or only available for Mac. I'm not asking for After Effects or other Cinema/Cinematic tools. Just key-frame based Vector animation that we can export to GIF/HTML-CSS/MP4. What do you guys think? Anyone else thinks Affinity Designer can really use some modern, innovative Animation tools?
  3. It doesn't matter what I copy, Designer always rasterizes it into a png for my clipboard. This is hyper annoying.
  4. I am trying to export SVG files from Affinity Designer and bring them into a range of programs for generating tabs / notches and then outputting for laser cutting. In Adobe Illustrator it is very simple - you set the document units to mm, design something with specific dimensions, and export your SVG. What comes out will be interpreted by other software, and by the laser cutter at the exact dimensions. With Affinity Designer, I've spent hours troubleshooting and digging through the forums and no matter what I do dimensions seem to vary depending on the DPI and all sorts of other options, and even slices of objects with the same height will export at different dimensions. It makes it practically impossible to predict what size your object will be. (as an aside, I thought DPI was completely irrelevant to vector - why is it even an option in a vector format?!) So is reliable scale something Affinity Designer just can't do? How are people delivering documents for print if they don't know how the printer will interpret the dimensions of their final files? I dumped Creative Cloud, bought the Affinity hoping to replace AI and now am faced with going back to Creative Cloud and getting stung with higher fees as a result of leaving. For my line of work this seems like really simple stuff...
  5. Hi, I'm using artboards in a document that contains all my graphics for our web-site. On the web we use SVG. Hence, I drag & drop some SVG files into AD and export from there. When adding an SVG via drag & drop, it gets added to the artboard as [Embedded document]. Some questions: How can I copy such a thing? When I do it the normal way and I edit the copy, the original gets changed too. Is there a way I can convert the embedded document into a normal group? Any documentation available about embedded documents? How to best edit these etc.?
  6. Hello, I love working with affinity designer on iPad... however, I'm having trouble exporting my file to SVG: All the layer blended shapes/groups are exported as raster images. Is there a way to retain the layer blending for svg files? It's mostly overlay and multiply. I've attached the exported file, hoping it will help figure what went wrong, or if what I'm trying to achieve is at all possible. Regards, Maco neck tie.svg
  7. I'm on the latest version of affinity designer, and have created a lot of isometric illustrstions. However, if I export my artwork to svg (web preset), and open them in sketch app, all the gradients are getting converted to images. I switched back to affinity to inspect these gradients, and I found these are just linear gradients without any special filters. If use the same gradients without isometric plane, the svg out retains its vector gradients, but exporting these with the isometric shapes, it's producing raster images. Is it a bug? Any solution to it. Because i have to do a lot of rework in that case. And it's not just sketch, but my front-end guys also showed me the number of images it has. let me know if you have any solution to it. Thanks
  8. Even if I enable this, copy&paste act like it's disabled. on Mac, I can paste SVG code to a text editor.
  9. Here’s a very quick tutorial that requires no images and may help others who use Affinity Designer with ZBrush to import vector/ svg shapes for extrusion. To bring in an SVG file to ZBrush’s Text 3D & Vector Shapes Plugin successfully I.e with no stretching of proportions and other potential issues….. 1, Make sure your document's porportions within Affinity Designer is square 2, If you didn’t create your vector shape in a square document - copy it and past it in to a newly created square document. NB: How the pasted shape is aligned is of no importance to ZBrush, nor is it’s size within the square document. 3, Select your shape in the document > now export your SVG >File > Export , using the preset SVG (for export) , Area = Whole Document. 4, Import in to ZBrush> ZPlugin> Text 3D & Vector Shapes>New SVG et voila. All should be harmony and joy. (At the time of writing using Affinity Designer 1.6 & ZBrush 4R8)
  10. I've tried to import a simple composition from AD into ZBrush as SVG but I get a mysterious "Unsupported file" message. I've tried several exporting options without any luck. Has anybody got the same problem? Using ZBrush 2019.1.2 and AD 1.7.
  11. Whenever I export a logo from Designer as an SVG I noticed in Illustrator CS6 my strokes change. It's my suspicion that when the scale strokes option is selected in Designer for iPad, the data gets lost during export to SVG or upon import into CS6. Anyone else getting this glitch? I suppose a workaround would be to convert those strokes to outlines before exporting but what if client wants me to adjust stroke weight on the fly on their computer? Or on my own? I have Designer for Mac as well but these clients do not. So I would like to know if this is something you plan to address in a future update. Fantastic app by the way! May the Vector Gods smile upon you!
  12. It doesn't matter what I copy, could be boxes, could be imported SVGs, instead of copying an SVG, Affinity Designer rasterizes it into an image. This is super annoying.
  13. Please add SVG SMIL export to Affinity Designer for exporting frame by frame animations, like the Adobe Animate CC plugin Flash2SVG does ( https://github.com/TomByrne/Flash2Svg ) . Thanks
  14. I think it would be great if there existed a plugin or persona in Designer that would allow you to create small SVG animations from vector shapes. I don't mean an entire motion effects app like Apple Motion 5 or After Effects. But something that would animation SVG for lets say web. Just an idea.
  15. When exporting a vector image to SVG, Designer appears to add hundreds of points to a path that aren't there when editing, causing the exported file to balloon many times the size as one exported from illustrator. For example, the Twitter logo contains 20 points on the path in Designer, but after exporting as a SVG it balloons to 1,554 points! Is there anyway to tell Designer to not add points, and to respect the original layout? This is holding me back from dumping Adobe Illustrator completely, so any help would be greatly appreciated. Thanks, Mike
  16. Hello, I am unable to preserve an opacity gradient (transparency tool in designer) applied at the group level when exporting to svg format. With option "rasterize unsupported properties", I get a rasterize image With option "rasterize nothing", the gradient disappear Is it a some workaround ? Thanks for your help. gradient.afdesign
  17. Adobe Illustrator unifies multiple shapes that is identical(Symbol) into single data when export SVG. This makes SVG a lot smaller. Would be nice if you could implement this. Also an option for simplifying shapes will be useful like SVGO's Precision option or AI's Decimal option.
  18. I will admit that my familiarity with use and defs proves limited at this point in time. In an effort to make it easier for plebs like me, could you export it as a similar svg filter object? When I use Affinity to export a project to SVG it exports anything with a Layer Effect as: <use id="Square-2-On" serif:id="Square 2 On" xlink:href="#_Image1" x="288.16" y="485.161" width="64.275px" height="83.71px" transform="matrix(0.988839,0,0,0.996549,0,0)"/> <defs> <image id="_Image1" width="65px" height="84px" xlink:href="data:image/png;base64,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"/> </defs> Currently I want to use it in d3 and, due to my ineptitude of either d3 or the underlying SVG, I cannot get it to work correctly. It would be nice to export this as a general svg format (I don't know how to explain this...) but as SVG and not an image. If you have the time, and if it doesn't cause misfortune or the project manager to have a stroke, can you add this feature? Example of the same image with out the sweetness: <g id="_87" serif:id="87" transform="matrix(0.522181,0,0,0.522181,216.702,382.197)"> <path d="M223.005,256.375L223.005,327.42L161.455,291.884L161.455,220.839L223.005,256.375Z" style="fill:rgb(121,238,249);"/> </g>
  19. 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.
  20. 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
  21. 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
  22. 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!
  23. 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
  24. 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
  25. 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>
×

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.