标签: vector-graphics

我想使用一些脚本语言(最好是Python)编辑SVG文件.特别是,我想合并两个SVG文件,添加一些注释,并将它们排列在一个更大的图像中.有没有可用于此类目的的软件？

谢谢,

巴尔托什

UPDATE

我终于决定使用nosklo提出的方法.你可以在github repo上找到SVG处理python模块的代码.我还在这篇文章中描述了如何使用它

我有一张地图,通过将不同颜色的区域转换为路径,我将光栅图形转换为SVG文件.

我知道如何在给定边缘数组的情况下进行基本的多边形点检查,但svg:path元素代表多个多边形以及蒙版(以解释海洋等),并通过解析d属性来提取该信息看起来相当笨重.

是否有一个JS库允许我简化检查？我基本上想要创建随机点,然后检查它们是在陆地上(即在多边形内)还是在水中(即在外面).

由于SVG元素似乎允许鼠标事件处理,我认为这不应该是一个大问题(即,如果你可以判断鼠标指针是否在元素的顶部,你已经在解决了这个问题.多边形问题).

编辑:使问题复杂一点,我应该提到svg:path元素似乎是基于曲线而不是线,所以只是解析d属性来创建边数组似乎不是一个选项.

由于元素可以采用fill属性,在画布上渲染SVG然后在给定点找到像素的颜色值的贫民窟方法可以起作用,但这似乎是一种非常非常糟糕的方法.

Matlab中的补丁从单个三角形粘合在一起.它们的边缘通常是不可见的,但是当我以矢量图形格式导出图形时,可以清楚地看到它们(不是显示整个图像,只是放大部分)

生成此MWE的代码是:

xx = [0:1:100, 100:-1:0];
yy = [zeros(1,101), ones(1,101)];
p1 = patch(xx,yy,'b'); 
print('testPatch','-dpdf','-painters')

替代功能fill表现相同.有没有办法避免这个错误,或者在这种情况下我是否必须使用位图？

编辑:一个解决方法是孵化该区域而不是填充它.这显然并非总是可行,但在我的情况下,它工作得很好,我可以坚持使用矢量图形.相关的FEX提交是http://www.mathworks.com/matlabcentral/fileexchange/30733-hatchfill

我有一个10,000p以上的Matplotlib散点图,我计划在LaTeX文档中作为图形插入以供发布.

我希望绘图点是光栅图形(例如PNG),因为具有这么多点的矢量图形经常会导致PDF阅读器出现问题.我希望刻度线和轴标签是矢量图形,所以我不必担心文本和线条的分辨率问题.

是否有一种简单的方法可以让matplotlib在保持轴/刻度矢量图形的同时制作绘图光栅图形的一部分？

到目前为止,我最好的猜测是对PNG进行某种预渲染,然后在保存为PDF之前用适当的轴边界显示生成的图像.

我们有一个.NET应用程序可以打印到真正的打印机和PDF,目前使用的是PDFsharp,但如果有更好的选择,可以更改该部分.大多数输出​​是生成的文本或图像,但可以有一个或多个页面附加到末尾.该页面由最终用户以PDF格式提供.

打印到纸张时,我们的用户使用预先打印的纸张,但在导出PDF的情况下,我们会将这些页面连接到最后,因为它们已经是PDF格式.

我们希望能够将这些PDF直接嵌入到打印流中,因此它们不需要预先打印的纸张.但是,将PDF转换为GDI页面(System.Drawing.Graphics)并没有什么好的选择.

是否有一种矢量格式,PDF可以通过某些外部程序转换为可以转换为GDI +页面而不会因首先转换为位图而降级？

我在使用标签嵌入的 SVG 文件中使用投影滤镜img。在我的 MacBook 上，Safari 浏览器看起来不错。然而，在移动版 Safari 中，图形变得非常像素化，并且失去了所有清晰度。未应用滤镜时，SVG 渲染效果良好。除了通过过滤器之外还有什么办法可以解决这个问题吗？

我有一个矢量图像(svg转换为xml):

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:better="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"
    tools:ignore="NewApi"
    android:viewportWidth="24"
    better:viewportWidth="24"
    android:viewportHeight="24"
    better:viewportHeight="24"
    android:width="24dp"
    android:height="24dp">
    <path
        android:pathData="M10.09 15.59l1.41 1.41 5 -5 -5 -5 -1.41 1.41 2.58 2.59 -9.67 0 0 2 9.67 0 -2.58 2.59zM19 3L5 3C3.89 3 3 3.9 3 5l0 4 2 0 0 -4 14 0 0 14 -14 0 0 -4 -2 0 0 4c0 1.1 0.89 2 2 2l14 0c1.1 0 2 -0.9 2 -2L21 5C21 3.9 20.1 3 19 3Z"
        better:pathData="M10.09 15.59l1.41 1.41 5 …

对于带有锯齿边缘的票证,我需要一个可变高度的svg-graphic.顶部和底部区段应按比例缩放以保持固定的纵横比,而中间区段应伸展以适合容器的尺寸.

这张图片应该是说明性的

我发现这个jsFiddle在水平而不是垂直方面做了很多我想做的事情,但我对viewbox不够精通,无法理解正在发生的事情并根据我的需要进行调整.我只是弄乱了我的档案.

我的svg文件目前非常简单; 顶部路径,底部路径和中间的矩形.它看起来像这样:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="464px" height="464px" viewBox="0 0 464 464" enable-background="new 0 0 464 464" xml:space="preserve">
    <path fill="#FFF100" d="M432.846,10.522c-5.755,0.057-10.466-4.562-10.522-10.316c-0.001-0.069-0.001-0.137,0-0.206h-20.839
        c0.057,5.754-4.563,10.465-10.316,10.522c-5.755,0.057-10.466-4.562-10.522-10.316c0-0.069,0-0.137,0-0.206h-20.843
        c0.058,5.754-4.561,10.465-10.315,10.522S339.021,5.96,338.965,0.206c0-0.069,0-0.137,0-0.206h-20.836
        c0.057,5.754-4.562,10.465-10.316,10.522c-5.754,0.057-10.465-4.562-10.522-10.316c0-0.069,0-0.137,0-0.206h-20.437
        c0,24.772-20.082,44.853-44.854,44.853c-24.771,0-44.853-20.081-44.853-44.853H166.71c0.056,5.754-4.562,10.465-10.317,10.522
        c-5.754,0.057-10.465-4.562-10.521-10.316c-0.001-0.069-0.001-0.137,0-0.206h-20.839c0.098,5.754-4.486,10.498-10.24,10.596
        c-5.754,0.099-10.498-4.486-10.596-10.24c-0.002-0.119-0.002-0.238,0-0.356H83.355c0.057,5.754-4.563,10.465-10.317,10.522
        S62.573,5.96,62.517,0.206c0-0.069,0-0.137,0-0.206H41.677c0.057,5.754-4.562,10.465-10.316,10.522
        C25.607,10.579,20.896,5.96,20.839,0.206c-0.001-0.069-0.001-0.137,0-0.206H0v56h464V0h-20.839
        C443.219,5.754,438.6,10.465,432.846,10.522z"/>
    <path fill="#FFF100" d="M432.846,453.478c-5.755-0.056-10.466,4.563-10.522,10.317c-0.001,0.068-0.001,0.137,0,0.205h-20.839
        c0.057-5.754-4.563-10.466-10.316-10.522c-5.755-0.056-10.466,4.563-10.522,10.317c0,0.068,0,0.137,0,0.205h-20.843
        c0.058-5.754-4.561-10.466-10.315-10.522c-5.755-0.056-10.466,4.563-10.522,10.317c0,0.068,0,0.137,0,0.205h-20.836
        c0.057-5.754-4.562-10.466-10.316-10.522c-5.754-0.056-10.465,4.563-10.522,10.317c0,0.068,0,0.137,0,0.205h-20.437
        c0-24.771-20.082-44.854-44.854-44.854c-24.771,0-44.853,20.082-44.853,44.854H166.71c0.056-5.754-4.562-10.466-10.317-10.522
        c-5.754-0.056-10.465,4.563-10.521,10.317c-0.001,0.068-0.001,0.137,0,0.205h-20.839c0.098-5.754-4.487-10.498-10.24-10.597
        c-5.754-0.098-10.498,4.486-10.596,10.24c-0.002,0.119-0.002,0.238,0,0.356H83.355c0.057-5.754-4.563-10.466-10.317-10.522
        c-5.754-0.056-10.465,4.563-10.522,10.317c0,0.068,0,0.137,0,0.205H41.677c0.057-5.754-4.562-10.466-10.316-10.522
        c-5.754-0.056-10.465,4.563-10.521,10.317c-0.001,0.068-0.001,0.137,0,0.205H0v-56h464v56h-20.839 …

我正努力在R中获得视觉上可接受的颜色渐变(有关我的特定情况的详细说明,请参见此处).简而言之,问题是当R窗口中的输出看起来没问题时,PDF会在用于生成渐变的段之间显示细白线.

n <- 100
cc <- colorRampPalette(c("red", "blue"))(n)
plot.new()
par(mar=rep(0,4))
sapply(1:n, function(i) rect((i-1)/n, 0, i/n, 1, col=cc[i], border=NA))
dev.copy2pdf(file="test.pdf")

结果如下:

你可以看到细细的白线.它们的位置取决于缩放,因此我假设它们是PDF显示方式的工件.在另一个缩放中同样如此:

不幸的是,这些线条在打印输出上也是可见的.我想问题可能是当矢量图形渲染到位图进行显示或打印时,PDF中的坐标如何变圆.

可能的解决方案是使用彼此重叠的段.这仅适用于纯色; 不幸的是,我也希望在渐变中使用透明色.

我可以做些什么来使我的PDF输出更好？

SVG 背景在 Chrome 和其他基于 Blink/webkit 的浏览器中显得模糊：

Chrome 中 SVG 的一部分的屏幕截图：

Firefox 中 SVG 的一部分的屏幕截图：

仅当使用“background-repeat: true”和“background-size: contains”CSS 值显示 SVG 时才会发生这种情况。我们希望根据需要多次重复 SVG 背景高度，因为页面高度是动态的，拉伸矢量图像看起来会很差。

SVG 在下面的示例页面的 CSS 中内联显示，但当我链接到外部 SVG 图像时，问题也会以同样的方式发生。

这是显示此行为的测试页面： https://august-13-2020-test-canvas.bubbleapps.io/version-test/pagemaker-test-original-2 （使用“用户名”和“密码”登录，我们需要将此身份验证放在这里）。

正确显示（清晰/平滑边缘）SVG 的测试页位于：https: //august-13-2020-test-canvas.bubbleapps.io/version-test/pagemaker-test-online-1

具有清晰/平滑边缘的版本以完全相同的方式显示 - 唯一的区别是 SVG 的内容。

以下是模糊页面的背景 SVG 链接：https://dd7tel2830j4w.cloudfront.net/d44/f1588704991659x396570736162959360/background.svg

我在此页面测试的所有 SVG 都有清晰的边缘：https://www.svgbackgrounds.com/#flat-mountains（右下角的是上面链接中使用的）

在尝试解决此问题或在 SVG 代码中确定其原因的过程中，我对 SVG 进行了相当多的编辑，尝试执行以下操作：

• 将所有 SVG 点值（路径的 d 属性）转换为整数
• 将“PreserveAspectRatio”添加到 SVG 的开始标签
• 从 SVG 的打开声明中删除高度和宽度
• 从 SVG 中删除“线性渐变”并用静态颜色替换它们
• 将 SVG 形状的大小加倍，看看模糊度是否会随着初始宽度和高度的增大而降低
• 将“crispEdges”属性添加到 SVG 路径
• 优化 SVG（使用 SVGomg）

此外，我尝试对 CSS 进行一些更改，但无法使其正常工作。

我对解决方法的一些想法如下： …