Hi
Have noticed that pasted svg’s in hype are being exported with an incorrect MIME type of XML Text Plain.
Came across this issue when I tried to upload a banner I made to my companies preview server and noticed the svg wasn’t loading up. Upon inspection of the console noticed it was incorrectly detecting the SVG by the wrong MIME type that was assigned when exported from Hype.
Can this be addressed?
Thanks
MIME type is set by your server -- here's a way to fix that for Apache-based servers:
Hi my developer came back with the following:
"The PastedVector.svg is missing the XML declaration. The document should start with the below as per http://www.w3.org/TR/xml11/#sec-prolog-dtd
<?xml version="1.0" encoding="utf-8"?>When the PastedVector.svg file is uploaded to a Symfony PHP application we use the getMimeType method from the File API. This method is returning the mime type as text/plain as the document doesn’t contain an XML declaration.
http://api.symfony.com/2.3/Symfony/Component/HttpFoundation/File/File.html#method_getMimeType
We have verified that adding an XML declaration to the SVG file means it’s mimetype can be correctly determined as image/svg+xml"
When you add a SVG file to the resource library, Tumult Hype won’t modify the file, so as long as it is valid SVG/XML, then it should work as expected.
(This is not a Hype issue, but an issue with whatever tool was used to produce the SVG file). A great tool for standardizing SVG output is SVGOMG: https://jakearchibald.github.io/svgomg/
So it doesn’t modify what was exported?
Sorry I should have been more clear in my first post. This was literally just vector points pasted from Illustrator.
So copy pasted whatever was on Illustrator stage and then pasted into Hype. Shouldn’t Hype be doing something to edit the svg then to make it compliant?
When I make a rectangle, and copy and paste it from Illustrator, I get this:
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In -->
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="97px" height="68px" viewBox="0 0 97 68" style="enable-background:new 0 0 97 68;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
</style>
<defs>
</defs>
<rect x="0.5" y="0.5" class="st0" width="96" height="67"/>
</svg>
This does appear to pass the W3C validator here: https://validator.w3.org/check
Can you share your .svg file or better yet your .ai file? It may be the Illustrator is having issues with bitmaps or some other aspect of what you’re copying.
The quickest way to get a compliant SVG if your server is giving you issues would be to run your copied SVG directly into SVGOMG, which removes any unnecessary errata & minifies into this:
<svg xmlns="http://www.w3.org/2000/svg" width="97" height="68" viewBox="0 0 97 68"><style>.st0{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}</style><path class="st0" d="M.5.5h96v67H.5z"/></svg>This is one of the pasted svg files…
PastedVector.svg.zip (2.6 KB)
When I use that image in a Tumult Hype document, I get this export: http://tumult.com/support/temporary/2016/document-with-svg.html
(Here's the file: document-with-svg.hype.zip (26.2 KB)
This does not throw any errors in the validator. The image itself, does throw a warning:
Changing the code of SVG content? I don't think we should be doing that. One thing that I think would be useful for us to do is to ensure that SVGs can be scaled more easily, which was discussed here. Updates to Illustrator and Sketch have resulted in better-performing SVGs so we may not need to take that road.
Regarding this post, the core of the issue is this:
MIME type is set by the server -- so this is something you need to fix on your server.
The link you posted here, PastedVector.svg wrong MIME type is discussing how mime types are sent by the server when a file is served by apache down to a client.
This issue however is talking about a file that is uploaded to a server.
That server is then inspecting that file to get information like it’s mimetype.
Because this file does not include an XML declaration it does not identify it as and SVG.
As you stated the file passed W3C validation. But gives a waring.
That warning is fixable, and warns you of problems that can occur when files that are read from disk do not have an XML declaration. This is the problem we were facing.
Can you see if you hit these issues when you use Illustrator’s built-in SVG export options?
Use File > Export > Format (SVG) > Check Artboards > Use these settings:
I think Hype is a little misleading when it comes to managing SVG files.
Why is the "Automatically optimize when exporting" option checked? Is Hype optimizing the SVG file? I don't think it's doing that.
If it isn't actually optimizing the SVG file, then maybe SVGOMG should be a part of Hype.
