如何解压缩和呈现通过 Wordpress 上传并由 cloudfront 压缩的 svg 文件？答案

【问题标题】：how to unzip and render svg file uploaded via Wordpress and zipped by cloudfront?如何解压缩和呈现通过 Wordpress 上传并由 cloudfront 压缩的 svg 文件？
【发布时间】：2016-05-31 10:10:18
【问题描述】：

我的 .svg 图像文件以 image/svg+xml 的形式上传到 WP 媒体库中。 Cloudfront 已压缩此文件，当我在 html 中引用它时，它不会呈现为图像，而是 Chrome 会提示我下载它。

我的 .htaccess：

AddType image/svg+xml .svg .svgz
AddEncoding gzip svgz

Amazon S3 属性、元数据：

content-type: image/svg+xml
content-encoding: gzip

从 WP 上传后，仅手动设置了 content-type。更改内容类型后，我必须清除云端缓存，因为它最初缓存的类型设置为mime/type（即使它已经在 Wordpress 中正确设置）。 我想避免对其他图像进行这种手动处理，但以后会担心。

html 代码：

<p>This renders</p>
<img src="https://s3.eu-central-1.amazonaws.com/mydomain.com/wp-content/uploads/mydrawing.svg" width="300px" height="300px" alt="blabla">

<p>This doesn't render</p>
<img src="http://a9txahw87b8uam.cloudfront.net/wp-content/uploads/mydrawing.svg" width="300px" height="300px" alt="blabla">

functions.php:

add_filter('upload_mimes', 'custom_upload_mimes');
function custom_upload_mimes ( $mimes=array() ) {
    $mimes['svg'] = 'image/svg+xml'; // this causes cloudfront zipping
    //$mimes['svg'] = 'mime/type'; // this doesn't cause cloudfront zipping
    return $mimes;
}

WP 插件设置：卸载 S3：

域：Cloudfront 域
将文件复制到 S3：打开
重写文件 URL：开启
对象版本控制：关闭

问题：

我知道 Cloudfront 将压缩内容类型为 image/svg+xml 的文件。但问题是查看器没有解压缩它。
如果我将 .svg 文件以 mime/type 的形式上传到 WP，则它永远不会被压缩并呈现。但这是正确的方法吗？感觉不对，并且无法将该图像设置为博文中的特色图像。

任何帮助解决或理解问题将不胜感激！

【问题讨论】：

CloudFront 不会“压缩”。是压缩包。这是两件不相容的事情。如果您已将内容压缩并在 S3 元数据中将 Content-Type 设置为 gzip，则 CloudFront 不应进一步修改内容，如果这样做，这是 CloudFront 中的一个大错误，这似乎不太可能。如果内容已被 gzip 压缩，但 Content-Type 未相应设置，则它不会工作，但不是您期望的原因。
docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/… 表示 CloudFront 将压缩标头中带有 image/svg+xml 的文件。这就是为什么（我认为）如果我将文件作为 mime/type 上传到 WordPress，它会单独留下文件。此外，该文件在 WP 中为 155kb，但在 Amazon 存储桶中为 28kb。
我编辑了文本以澄清：设置 content-encoding 值的不是我。我只设置了content-type。
我之前应该这样做而不是假设，但迈克尔的评论让我检查了 Cloudfront 的设置。原来（某些）文件的自动压缩设置为关闭。所以我必须得出结论，压缩来自 WP 插件，而不是来自 Cloudfront。

标签： wordpress svg amazon-s3 mime-types amazon-cloudfront

【解决方案1】：

它现在可以工作了（我所做的只是从昨天开始第一次刷新我的浏览器）。我认为这是一个未知的缓存问题。

我说 unknown 因为我清除了 CloudFront 中的缓存（造成了失效）以及我的浏览器。

我还像往常一样通过将一个 svg 文件直接上传到 S3 存储桶和另一个通过 WP（通过 Offload S3 插件）进行了一个小测试。后者是压缩的，前者不是。但两者都呈现。

【讨论】：