如何在iPython / Jupyter Notebook中调整SVG图形的大小/缩放？

Question

我有一个很大的SVG（.svg图形）对象，可以显示在iPython / Jupyter Notebook中。实际上，我已经用Keras创建了一个大型的神经网络模型图形来显示。

from IPython.display import SVG
from keras.utils.vis_utils import model_to_dot

SVG(model_to_dot(model,show_shapes=True).create(prog='dot', format='svg'))

因此，我想调整SVG图形的大小/调整/缩小以适合我的笔记本页面（特别是水平的，因为页面宽度有限）。

Answer 1

由于这是网页渲染的问题，因此我选择使用CSS。

在我的SVG创建单元上方的代码单元中，我插入了带有CSS规则的IPython HTML代码，以将宽度和高度缩小50％。我添加了关键字!important，以优先考虑此CSS规则。

from IPython.display import HTML
style = "<style>svg{width:50% !important;height:50% !important;}</style>"
HTML(style)

Answer 2

另一个选择是使用“ dpi”（每英寸点数）属性。有点黑，但这使我可以缩小SVG。 Tensorflow: model_to_doc

    from IPython.display import SVG
    from keras.utils import model_to_dot

    SVG(model_to_dot(model, show_shapes= True, show_layer_names=True, dpi=65).create(prog='dot', format='svg'))

Answer 3

这对我有用：

from IPython.display import SVG, display, HTML
import base64
_html_template='<img width="{}" src="data:image/svg+xml;base64,{}" >'

def svg_to_fixed_width_html_image(svg, width="100%"):
    text = _html_template.format(width, base64.b64encode(svg))
    return HTML(text)

svg_to_fixed_width_html_image(svg)

Answer 4

基于CSS的上述解决方法似乎不适用于我，因为width =和height =都直接在生成的SVG元素的属性中设置。

作为其他解决方法，这是我得到的：

iv1_dot = model_to_dot(iv1_model, show_shapes=False, show_layer_names=False, rankdir='LR')
iv1_dot.set_size('48x8')
SVG(iv1_dot.create(prog=['dot'], format='svg'))

这使我可以指定以英寸为单位的graphviz绘图的大小（在上述情况下为48x8）。

Answer 5

上面和下面的答案确实很好，但是取决于系统。它们可能始终不适合您，具体取决于您的浏览器插件，Jupyter版本，Colab环境等。通常，SVG（）会将点图像转换为SVG文件，但是通过自定义关联来调整其大小很难HTML。我建议使用的是这个

from keras.utils import plot_model
plot_model(model, to_file='model.png')

然后您可以使用上面的answer by user48956中的代码段来调整生成的图像的大小。但是在大多数情况下，它是自行扩展的。

更多参考：Here