Search the Community

Showing results for tags 'SVG'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Affinity Support
    • News and Information
    • Questions
    • Feature Requests, Suggestions and Feedback
    • Bugs in Affinity Designer & Affinity Photo
  • Learn and Share
    • Tutorials
    • Share your work
    • Resources
  • Affinity Beta Support
    • Photo Beta on iPad
    • Designer Beta on Mac
    • Designer Beta on Windows
    • Photo Beta on Mac
    • Photo Beta on Windows

Found 230 results

  1. I have an SVG which contains a gradient with 2 stops (darker blue to lighter blue) that I created with Affinity Designer that I later optimised with SVGO for smaller size for web use. However, after re-opening the optimised SVG in Affinity Designer, the gradient doesn't show - the entire curve appears as filled with only the first colour stop. However, when clicking on the curve, the fill settings show the correct gradient with both stops. The gradient in the optimised SVG shows up fine in all web browsers and a few other graphics editors. Attached is the file. Thanks mountain.svg
  2. When exporting to SVG, is it possible to get HTML5 output without putting every property into styles? Example: <?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ""> <svg width="100%" height="100%" viewBox="0 0 300 57" version="1.1" xmlns="" xmlns:xlink="" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"> <rect x="78.614" y="8.716" width="220.68" height="14" style="fill:#e0e0e0;"/> <ellipse cx="28.992" cy="28.132" rx="24.492" ry="23.632" style="fill:none;stroke:#e0e0e0;stroke-width:9px;"/> </svg> According to this can be written like this (looking only at the rect and ellipse): <?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ""> <svg width="100%" height="100%" viewBox="0 0 300 57" version="1.1" xmlns="" xmlns:xlink="" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"> <rect x="78.614" y="8.716" width="220.68" height="14" fill="#e0e0e0"/> <ellipse cx="28.992" cy="28.132" rx="24.492" ry="23.632" fill="none" stroke="#e0e0e0" stroke-width="9px" /> </svg> In my opinion this a more modern and cleaner way of writing SVG.
  3. Working with simple shapes creates simple SVG files, but the moment I add an outline the path... Well, haha, it becomes a nightmare. TWO objects are exported: the solid fill object, and the outline object (why?). The fill object is fine, but the outline has gone from 10 control points to ~2200. Best I can figure AD is doing this because it doesn't do outlines the same way SVG does, but since SVG supports strokes of different widths and miter types, I don't know what, specifically, the issue is. If I export a solid object, it works as expected, same number of points in AD and Inkscape. Add an outline, and hahaha ouch. I'd love to know what's up with this and whether AD just can't do outlines->SVG without becoming unwieldy.
  4. Hi again, as I was importing some of my SVGs, I noticed some slight issues with their appearance in Affinity. So, I did some testing and found out what was causing these issues. I've created a separate file for each bug (14 in total). It should become clear by following the instructions below. If not, just let me know! Disclaimer: Importing the first file will (most likely) make Affinity crash. Please save your work progress before trying! Instructions: 1. Open the attached files in a web browser 2. Now import them into Affinity (Photo or Designer) 3. Compare both versions closely Cheers! ------------------------------------------- Affinity Designer Version: Affinity Photo Version: Operating System: Windows 10 1_crash_when_colour_capitalised.svg 2_stroke_although_colour_not_set.svg 3_no_fill_when_colour_capitalised.svg 4_incorrect_gradients_when_gradientUnits_objectBoundingBox.svg 5_nested_svgs.svg 6_no_repetitive_gradients.svg 7_stroke_dasharray_wrong_direction_starting_point_array_too_short.svg 8_no_patterns.svg 9_incorrect_skewing.svg 10_no_drop_shadows.svg 11_no_blending.svg 12_close_path_and_moveToEnd(!).svg 13_no_masking.svg 14_no_markers.svg
  5. Hi guys, I exported some graphics as .SVG to use them in a website, but: 1. image As you can see here (the SVG is the upper graphic, the PNG is the lower graphic) the colors in the SVG are heavily different. 2. image Here (the SVG is again the upper graphic, the PNG is the lower graphic) the stars are completely blurry. Cheers, Stefan.
  6. Dear All, I really like to work with Affinity Photo and Designer. Since I´m Adobe free now, I can´t compare my issue with other vector software but let´s get to the point: When I´m exporting a rectangle with 100mm x 100mm from Affinity Designer and I´m importing it in different kinds of software (Like CAD oder other tools which supports SVG) the rectangle is 312 x 312mm. This means, I need to divide my drawings by 3.12 to get the right dimension after exporting from Affinity Designer. Since this is not really precise and makes everything more complicated, I want to know if there is any setup option in AD to get it out of the software accordingly. THX for your help Mac OS Sierra with the Affinity Designer 1.5.5
  7. Hello, I've been having a terrible time with SVG files imported into Silhouette Studio from Affinity Designer when trying to create cut files of my designs. I've searched read the threads here on the issue. The one thread the characterizes my exact issue is found here: Where user @Busenitz says Definitely, the disappearing element is a problem. Some layers/elements just don't even show up no matter what I try. I've experienced all the challenges spoken in the Silhouette threads here. I've tried all of the suggestions on the forum and it seems that Affinity Designer SVGs are the only files having this issue with Silhouette. The PDF option allows the entire design to import but there is always the issue with separating elements for cutting as well as proportion or sizing issues. What I'd like to know is whether or not this is an Affinity Designer (proprietary format) issue and there needs to be some more tweaking in either software programs to get this right. What is actual fix here and what am I missing? What does AD have this issue and other programs do not? I'm all in on AD and it has exponentially improved my design productivity...until I import my designs into Silhouette. Any insight and guidance would be greatly appreciated. Thanks! ~T
  8. The <symbol> SVG element is being handled incorrectly. Below is the svg. This imports to Affinity Designer as two mirrored rectangles in displaced locations. All other svg's with the <symbol> element are similarly garbled. I've included a screen shot and the .svg file. This element should create a single rectangle in the Studio Symbols palette with an instance at the xlink coordinates, and named per the id="rectangle_symbol" which is not the same as the svg source file name. Thanks! <?xml version="1.0" encoding="iso-8859-1"?> <!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ""> <svg version="1.1" id="Layer_1" xmlns="" xmlns:xlink="" x="0px" y="0px" viewBox="0 0 960 560" style="enable-background:new 0 0 960 560;" xml:space="preserve"> <symbol id="rectangle_symbol" viewBox="-105.628 -67.808 211.256 135.615"> <polygon style="fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;" points="105.128,-67.308 -105.128,-67.308 -105.128,67.308 105.128,67.308 "/> </symbol> <use xlink:href="#rectangle_symbol" width="211.256" height="135.615" x="-105.628" y="-67.808" transform="matrix(1 0 0 -1 483.2564 233.0769)" style="overflow:visible;"/> </svg> rectangleSVGimport.tiff rectangleSymbol.svg
  9. I'm having a pretty major problem with the svg exporting features in affinity. When I set up a simple scene with two objects, each with their own drop shadow, the drop shadows are not rendered transparently, This is causing heaps of grief, because when I move the objects around, the shadows are just blocky images that look really bad, as shown: Is there some way to force afinity to render the image with a transparent background? This is really bad when I try to move the objects around on the web with javascript. +1 For svg filters. It would honestly make 90% of these problems go away.
  10. Hi all, Is it any option to transform a picture from JPG to SVG in Affinity Designer? I don't see any option at Tool Panel. Thank you. Laura
  11. Hello everyone, ok, so I am having issues with my svg vector artwork that I imported into Affinity Photo. The image looks normal when at 100 % zoom then when I zoom in it gets pixelated... although when I export in pdf or svg it looks fine. Is there an option I am missing somewhere? I just want to be able to zoom in and see the file how it will look when I export. Please let me know if you have an answer or suggestion? Thank you
  12. Hi, AD (Win ver. when opening SVG files ignores the vertical shift of characters in a text... this renders some strange results (see the screenshot of the rendering of the attached file in Inkscape and in AD). test.svg
  13. When drawing elements to be cut on a laser cutter, setting up a document in mm is very helpful. Unfortunately, the common interchange file format for this kind of device is SVG. While the file format supports measurements in defined units, Designer converts to pixels during the export, which means that after import, the dimensions have to be recalculated. Therefore, it would be great to have the option to preserve the units from the document during export, such that a 50x150mm rectangle is exported just as such.
  14. When I open an svg file created in Inkscape in Designer, some of the tools don't work. For example: when I select the text elements in order to change them to a different font or size, they don't change. The font is selected in the Character menu etc, but the fonts don't change in the file itself. As the program exports svg files I figured there wasn't a compatibility issue with Inkscape files. Is there a general compatibility issue between svg and Designer or is it to do with Inkscape? And is there a solution? I also can't open ai files created in Illustrator. The file opens with no content except this text: 'saved without PDF Content. To Place or open this file in other applications, it should be re-saved from Adobe Illustrator with the "Create PDF Compatible File" option turned on. This option is in the Illustrator Native Format Options dialog box, which appears when saving an Adobe Illustrator file using the Save As command.' Is there a solution to this too? I love this program, but this kind of glitch makes updating previous work impossible now I have switched from Illustrator to Affinity Designer, which means it has to re-created from scratch. Thanks for your help.
  15. For an SVG document like the attached that relies on `currentColor` to set the color of nodes (normally set via CSS on parent elements in the document), the document loads with nothing visible (since both fill and stroke are set to none). In a viewer (e.g. Chrome), the default curve color is set to black. alert-octagon.svg In a standalone SVG viewer, the result is also correct.
  16. I just wanted to recap the current state of how Affinity Designer is performing in web design workflows. I'm using Affinity Designer since one year for all of my work and I love the application itself. But as of now there is no complete workflow to handout designs made in AD to developers in any way: 1. Neither Zeplin nor Avocode support AD and it doesn't seem that anthying will change here. 2. Affinity Designer supports PSD Export but has two major drawbacks: Border radius properties are not preserved and text layers are completely flattened which make them completely useless. 3. Affinity Designer doesn't support the new open file format of SketchApp to be able to export designs as Sketch files to then inspect them in Zeplin, Avocode, or any other Sketch Viewer. 4. Exporting to SVG or PDF is not an option either because important properties like border radius, line-height and others are missing. 5. Right now it doesn't seem that Affinity is adding an inspect persona or any viewer service or app. So I'd like to ask the Affinity Designer team: What are your goals to improve the workflow for webdesigners and developers? How are you planning to improve this workflow in the future or don't you plan to do anything in this regard? Do you have any suggestion how web designers can work with developers? I've added a poll so that users can vote which suggestion they like the most.
  17. Loading the attached SVG in AD, apart from the bug reported here, entirely loses one of the SVG layers/elements. This is what AD shows (once the fill color is set): This is what shows when the SVG is loaded in a viewer: alert-octagon.svg
  18. 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.?
  19. When exporting to SVG, is it possible to export filters as SVG filters instead of raster images? Thank you in advance.
  20. Hi! Firstly, I want to thank you for your products. You do amazing work guys and I really enjoy using them! I believe there are more important features to be implemented, but I couldn't find this one here, so let's list it: There is a "new" font format called OpenType-SVG that stores vector or bitmap informations to create colored fonts. Would be great to push the limit :) PS: Links explaining OpenType-SVG/Color Fonts:
  21. When exporting the document to SVG, no matter what settings I change I consistantly get one of two outcomes. 1.) --- The SVG becomes a rastered image when the export settings are set to rasterise unsupported properties. Helen's_Bike.svg 2.) --- The SVG becomes broken, Helen's_Bike_0.svg (Only the mask for the handlebars seems to work. All Shadow shapes display unmasked and the shapes used as masks seem to be released. Them being released also means that they are a layer above the Shadow layers) There are no effects on any layers, although there were previously. I had been experimenting with adding a stroke to the outside of the primary NewBike group. I have read multiple other threads that I thought might solve my solution, however nothing is working. Here is the working file Helen's_Bike.afdesign --- I appreciate any help. My only other option is paying a month for Creative Cloud to trace a PNG of the work I've done so far. And I seriously don't want to have to considering I just purchased this. I have a Windows machine and my version is a stable release. I believe version 1.5. this was downloaded half a week ago.
  22. Hi, Don't know if this is the right place to ask this but here goes... I want to be able to export an svg with holes in it. This is what I get when I export: <?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ""> <svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="" xmlns:xlink="" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"> <path d="M18.072,4.458c0,-0.344 -0.279,-0.622 -0.622,-0.622l-10.9,-0.042c-0.343,0 -0.622,0.279 -0.622,0.622l0,15.126c0,0.344 0.279,0.622 0.622,0.622l10.9,0.042c0.343,0 0.622,-0.279 0.622,-0.622l0,-15.126Zm-6.072,6.298l0,-1.512l-4.045,0l0,1.512l4.045,0Zm2.257,-2.814l0,-1.512l-6.302,0l0,1.512l6.302,0Z"/> </svg> For my project, I only need the path. But when I only insert the path into my project, I just get a full black shape. The culprit is the style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;" If I import the whole svg object... I do see the holes in the shape What am I doing wrong in the export? I just combine (or substract) the 2 shapes prior to exporting so I have one '(Curves)' layer Thanks! - Desired result in one path (without style tag)
  23. I try to export 3 slices as SVG format into a folder where the files already exist and want them to be replaced. The export fails, without a way to confirm a replacement. Exporting to an other folder works.
  24. svg

    There should be an option to not apply IDs to the SVG for a smaller file size. <?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ""><svg width="100%" height="100%" viewBox="0 0 90 90" version="1.1" xmlns="" xmlns:xlink="" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><rect id="SomeRectangle" x="12.42" y="21.24" width="38.52" height="42.84" style="fill:#03006b;"/></svg> See id="SomeRectangle"? Is there an option to strip all of these?
  25. This might just be missing something, but I'm out of ideas. I've used AD's SVG export before, and not found this problem. AD 1.5.5 on MacOS 10.12.5 I have a document with a few lines of text on it, on which I've drawn some export slices and set them up to export to SVG (one slice per line of text). The slices are on the pixel grid, and a whole number of pixels in width/height. When I export, the resulting SVG has dimensions set smaller than the slice - though the full image is in the file, just shrunk. As an example, my first slice is 150x30px, but the SVG exported is 113x23px. I get the same wrong dimensions whether I use the viewbox or the width/height for the export. If I change the slice size, the resulting SVG's dimensions change, but they're always smaller by some amount. The effect is as if the export was scaled down from the original size. I've attached a screengrab from AD showing the correct dimensions, and the SVG showing the wrong dimensions. Let me know if I can provide any other detail. Thanks!